单击时更改按钮和 div答案

【问题标题】：Change button and div on click单击时更改按钮和 div
【发布时间】：2012-07-10 10:21:39
【问题描述】：

您好，我需要使用“查看 360”按钮来模拟此网站功能：http://www.designrattan.co.uk/daybed/apple

我已经完成了 360 脚本，只是我无法完成的按钮？

我在这里尝试过： http://designliving.tk/winchester-rattan-garden-round-table-set

但如您所见，有几件事是错误的。

单击按钮时我需要更改 DIV，但每次单击时我也需要更改按钮（从“查看 360”到“查看图像”）。

除此之外，我还需要我的照片选项卡中的图像才能将 div 和按钮更改回“查看 360”

我想我有 JavaScript，但我不知道如何将它与 HTML 结合使用

$('.yourButton').bind('click',function(){
if (!$('.yourButton').hasClass('dragMode')) {
    $('.yourButton').addClass('dragMode');
    $('.yourButton').attr('value')="Drag [...]";
} else { // if in drag mode
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

$('.yourTabImages').bind('click',function(){
if ($('.yourButton').hasClass('dragMode')) {
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

我希望这一切都有意义！，

谢谢大家！

【问题讨论】：

请发布您的相关代码。

标签： javascript jquery html css

【解决方案1】：

如果你使用 jquery，它可以很容易地用类似的东西来实现：

$('.yourButton').bind('click',function(){
    if (!$('.yourButton').hasClass('dragMode')) {
        $('.yourButton').addClass('dragMode');
        $('.yourButton').attr('value')="Drag [...]";
    } else { // if in drag mode
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

$('.yourTabImages').bind('click',function(){
    if ($('.yourButton').hasClass('dragMode')) {
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

通过这种方式，您可以在选择处理点击事件时调用的方法时验证您的按钮处于哪种模式。希望这会有所帮助

【讨论】：

如果你看我的网站，我已经破解了360脚本！我需要知道如何操作控制 DIV 的按钮？
我的帖子是关于控制 div 的按钮，否则我不明白你的问题到底是什么。你能解释一下这个按钮的预期行为和现在的行为吗？
啊，谢谢，我没有意识到。你能解释一下我将如何将它与 html 代码结合使用吗？谢谢！
考虑到 jquery 已加载，像这样绑定这两个事件应该可以完成工作： $(document).ready(function() { //... });
我还是不明白，我觉得你高估了我在这方面的知识！你能像 5 岁的孩子一样跟我说话吗？我不知道我会使用什么 html 来结合这个脚本来使它与 DIV 和按钮一起工作

【解决方案2】：

不要实现自己的代码，这需要时间。使用您喜欢的任何插件： http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/#.T_wDU5GFp9g

【讨论】：