jQuery toggle 3 Div

Question

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

我附上我的活生生的例子：

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，它应该成为unclickable ....但没有任何反应。

感谢您的帮助！

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'); 
}); 

Can be tested here

（我添加了一个父元素，以简化在jQuery的事件代表团。）

Answer 2

.attr（）将属性设置为标签。所以就像你会得到该代码的<div non-selectable='selectable'>。这里是documentation。我会使用.removeClass（）和.addClass（），尽管可能有更有效的方法。

Answer 3

没有可用于html标记的可选属性。当您编写$（“btn3”）。attr（“selectable”，“not-selectable”）时;

;它意味着将btn3的可选属性设置为'不可选择'值。

也为btn3是你应该写$类（”。btn3 '）而不是$（' btn3' ）

Answer 4

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

有很多你的代码错误：

1）使用重复的ID：ID必须是唯一的，每页一个。类不一定是唯一的。所以我改变了你的ID和课程。

2）你应该改变教学班，addClass/removeClass /或toggleClass

3）你不应该使用一个类你撤除点击功能的触发，所以我给他们的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"); 
     } 

    }); 

});