1

4 つのスパンを持つ 1 つの 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の2つのボタンがあります

.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 がクリックされた場合、上記のすべてが発生します。

ボタン2、すべての下線をすべて削除したいのですが、最終的に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");

ボタン2をクリックした後、ボタン1をクリックするまでスパンテキストに下線を引くことができないようにしたい. したがって、すぐ上のものは下線クラスを削除しますが、各スパン要素をクリックして下線を引くことができますが、これは望ましくありません!

誰かがこれで私を助けてくれますか? 私はこれに慣れていないので、ボタン1の機能もクリーンアップするのを手伝ってくれたらうれしいです!! ありがとうございました！

4

5 に答える 5

1

これはどうですか -デモ

$("span").on("click", function() {
  $(this).siblings().removeClass('underline').end().addClass("underline");
});
于 2013-01-14T19:24:34.053 に答える
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/

まず、すべてのスパン クリックを 1 行で処理します。これは、クリックされたスパンにクラスを追加し、その兄弟から削除します。

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

下線付きスパンから下線クラスを削除する次のボタン 2

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

最後に、#text にいくつかのフラグ クラスを追加して下線を有効にする button1

$(".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 に答える
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

これを試して：

$('#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 に答える