1

我有一个 div，其中有 4 个跨度：

<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，则其他文本不应有下划线），以及另一个应取消下划线的 button2，直到再次单击 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");
}); 
});

这意味着如果单击 button1，上述所有情况都会发生。

所以 button2，我希望它从所有内容中删除所有下划线，但我不想再次执行上述所有操作，因为最终我将拥有 100 个跨度标签！

我认为正确的是

$('#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 后，在单击 button1 之前，我无法使跨度文本下划线。所以上面的那个删除了下划线类，但我仍然可以单击每个跨度元素并使其成为我不想要的下划线！

有人可以帮我解决这个问题吗？我对此有点陌生，所以如果你也能帮我清理 button1 的功能，那就太好了！谢谢！

4

5 回答 5

1

这个怎么样 -演示

$("span").on("click", function() {
  $(this).siblings().removeClass('underline').end().addClass("underline");
});
于 2013-01-14T19:24:34.053 回答
0

试试这个：

$('#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');
    });
});
于 2013-01-14T19:23:03.893 回答
0

你快到了。在这里尝试演示

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

更新：

还有另一种解决方案，您可以在其中取消绑定跨度上的单击事件。但是使用变量会更简单更快。如果您无法创建全局变量，请考虑取消绑定。

于 2013-01-14T19:24:10.933 回答
0

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;}
于 2013-01-14T19:31:58.900 回答
0

我不确定我的理解是否完全正确。

演示：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");
  }
});

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

于 2013-01-14T19:35:44.313 回答