Question

我有一个包含4个跨度的div：

<div id="text">
<span class="text_1" id="text1">text1 1</span>
<span class="text_2" id="text2">text2 2</span>
<span class="text_3" id="text3">text3 3</span>
<span class="text_4" id="text4">text4 4</span>
</div>

我有两个按钮，buton1允许班级下划线

.underline
 { border-bottom:1px solid #000; }

当我点击每个跨度时添加到每个跨度（所以如果我单击text1，那么其他文本不应该有下划线），另一个按钮2应该取下下划线，直到再次单击button1。

我拥有的是：

$('#button1').click(function () {

    $(".text_1").click(function () {
     $(".text_2").removeClass("underline");
     $(".text_3").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_1').addClass("underline");
});

     $(".text_2").click(function () {

     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_2').addClass("underline");
});
$(".text_3").click(function () {

     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_3').addClass("underline");
});

     $(".text_4").click(function () {

     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $('.text_4').addClass("underline");
}); 
});

意味着如果单击按钮1，则会发生上述所有情况。

所以button2，我希望它删除所有内容的所有下划线，但我不想再做上述所有操作，因为最终我会有100个span标签！

我认为正确的是

$('#button2').click(function () {

        $('#text').removeClass("underline") });   });

但这不起作用。（#text是div id）

然后我尝试了

$('#button2').click(function () {
     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $('.text_4').removeClass("underline");

我想要它，以便在您单击button2之后，我无法使span文本下划线，直到我单击button1。所以上面的那个删除了下划线类，但是我仍然可以点击每个span元素并使其下划线，我不想要它！

有人可以帮我吗？我对此有点新意，所以如果你能帮我清理button1的功能那就太棒了！谢谢！

Answer 1

试试这个：

$('#button2').click(function () {
    $('.underline').removeClass('underline');
    $('#text span').unbind('click');
});

在此之后，只需打开underline即可获得所需内容。

此外，您可以像这样点击button1：

$('#button1').click(function () {
    $("#text span").click(function () {
        $('.underline').removeClass('underline');
        $(this).addClass('underline');
    });
});

Answer 2

你快到了。试试DEMO HERE

var allowClick = true;

$('#text span').click(function () {
  if (allowClick == true) {
    $('#text span').removeClass("underline");
    $(this).addClass("underline");
  }
});

$('#button1').click(function () {
  allowClick = true;
});

$('#button2').click(function () {
  $('#text span').removeClass("underline");
  allowClick = false;
});

<强>更新

还有另一种解决方案，您可以解除对span的click事件的绑定。但使用变量将简单快捷。如果无法创建全局变量，请考虑取消绑定。

Answer 3

这个怎么样 - DEMO

$("span").on("click", function() {
  $(this).siblings().removeClass('underline').end().addClass("underline");
});

Answer 4

使用Javascript：

$("#button1").click(function(){ 
  $("#text").removeClass("disable-underline");
});
$("#button2").click(function(){ 
  $("#text").addClass("disable-underline");
});

$("#text span").on("click", function(){
  $("#text span").removeClass("underline");
  $(this).addClass("underline");
});

CSS：

.underline { border-bottom:1px solid #000; }
.disable-underline .underline { border-bottom: 0;}

Answer 5

我不确定我完全理解你。

演示：http://jsfiddle.net/kYg8k/

首先，让我们在一行中处理所有跨度点击。这个添加类来点击跨度并从其兄弟中移除。

$("#text SPAN").click(function(){
  $(this).addClass("underline").siblings().removeClass("underline");
});

下一步按钮2从任何带下划线的范围中删除下划线类

$(".bt2").click(function(){
    $("#text SPAN").removeClass("underline");
});

最后，button1通过向#text

添加一些标志类来启用下划线

$(".bt1").click(function(){
  $("#text").toggleClass("underlinable");
});

并让我们在事件

上使用此标志

$("#text SPAN").click(function(){
  if ($(this).closest("#text").hasClass("underlinable")) {
    $(this).addClass("underline").siblings().removeClass("underline");
  }
});

（在演示中我没有带标志指示的高级代码。）

禁用类onclick直到单击另一个按钮

5 个答案: