jQuery切换3 Div

Question

我想切换3格。 在开始的情况下，我有第一个div，因为其ID而无法触发clic。 当我单击第二个或第三个div（触发）时，单击的DIV必须变为不可单击，而其他2可单击。

我附上我的现场例子：

http://jsfiddle.net/YV3V5/

HTML：

<div id = "not-selectable" class = "btn1">Div 1</div>
<div id = "selectable" class = "btn2">Div 2</div>
<div id = "selectable" class = "btn3">Div 3</div>

JAVASCRIPT：

$( "#selectable" ).click(function(e) {


    var className = $(this).attr('class');

    alert(className);

    if (className == "btn1") {
        $("btn1").attr("selectable","not-selectable");
        $("btn2").attr("not-selectable","selectable");
        $("btn3").attr("not-selectable","selectable");   
    } else if (className == "btn2") {
        $("btn2").attr("selectable","not-selectable");
        $("btn1").attr("not-selectable","selectable");
        $("btn3").attr("not-selectable","selectable");   
    } else if (className == "btn3") {
        $("btn3").attr("selectable","not-selectable");
        $("btn1").attr("not-selectable","selectable");
        $("btn2").attr("not-selectable","selectable");   
    }

});

在这种情况下，当我单击第二个DIV时，它应该变得不可点击...。

谢谢您的帮助！

Answer 1

您的代码中有几个错误。 最重要的是ID应该是唯一的。 其次，您尝试将值分配给属性“可选”和“不可选择”。 这些属性不存在。

如果正确放置标记，则可以非常简单地完成。 我建议这样的事情：

HTML

<div class="buttons">
    <div class="button">Div 1</div>
    <div class="button selectable">Div 2</div>
    <div class="button selectable">Div 3</div>
</div>

jQuery的

$( ".buttons" ).on("click",".selectable",function(e) {
    $('.button').addClass('selectable');
    $(this).removeClass('selectable');
});

可以在这里测试

（我添加了一个父元素来简化jQuery中的事件委托。）

Answer 2

没有称为html标签的selectable属性。

当你写$（“ btn3”）。attr（“ selectable”，“ not-selectable”）; 这意味着将btn3的selectable属性设置为值“ not-selectable”。

同样因为btn3是一个类，您应该编写$（'。btn3'）而不是$（'btn3'）

Answer 3

工作演示 http://jsfiddle.net/YV3V5/23/

您的代码有很多错误：

1）使用重复的ID：ID必须是唯一的，每页一个。 类不必是唯一的。 因此，我更改了您的ID和类。

2）您应该使用addClass / removeClass /或toggleClass更改类

3）您不应将您要删除的类用作click函数的触发器，因此我为他们提供了相同的btn类。

html：

<div id="btn1" class="not-selectable btn">Div 1</div>
<div id="btn2" class="selectable btn">Div 2</div>
<div id="btn3" class="selectable btn">Div 3</div>

css 我为可选添加了蓝色背景，为不可选择添加了红色背景，因此更容易可视化正在发生的事情 ：

.selectable {
    background: blue;
}
.not-selectable {
    background: red;
}

jQuery的：

$(document).ready(function () {

    $(".btn").click(function (e) {

        var id = $(this).attr('id');

        if (id == "btn1") {
            $("#btn1").removeClass("selectable").addClass("not-selectable");
            $("#btn2").addClass("selectable").removeClass("not-selectable");
            $("#btn3").addClass("selectable").removeClass("not-selectable");
        } else if (id == "btn2") {
            $("#btn2").removeClass("selectable").addClass("not-selectable");
            $("#btn1").addClass("selectable").removeClass("not-selectable");
            $("#btn3").addClass("selectable").removeClass("not-selectable");
        } else if (id == "btn3") {
            $("#btn3").removeClass("selectable").addClass("not-selectable");
            $("#btn1").addClass("selectable").removeClass("not-selectable");
            $("#btn2").addClass("selectable").removeClass("not-selectable");
        }

    });

});

Answer 4

.attr（）将属性设置为标签。 因此，就像您将获得该代码的<div non-selectable='selectable'> 。 这是文档 。 我可能会使用.removeClass（）和.addClass（），尽管可能会有更有效的方法。