1

これが私のジレンマです。ここでこのJqueryの極端なコードを追跡していて、特定のリンクが表示されているかどうかを確認するのに助けが必要です。これが私が持っているものです。

トグル：

<a href="#" id="visbilitybutton" class="button" title="Visible"><span class="icon icon84"></span></a>

<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>

（異なるのはアイコン番号だけです）誰かが#visbilitybuttonをクリックすると、これらは前後に切り替える必要があります。これを実行し、選択されたものをキャプチャするための最良の方法がわかりません。

私が現在持っている唯一のコードは、トグルを一方向に動かしますが、もう一度クリックしても戻りません。

 $(document).ready(function () { 
    $('#visbilitybutton').click(function() {
         $(this).replaceWith('<a href="#" id="visbilitybutton" class="button" title="Invisible"><span class="icon icon85"></span></a>');
    }); 
    });
4

3 に答える 3

1

まず最初に、ページに複数の同一のid属性を設定しないでください。visibilitybuttonクラスを作る。

とにかく、jQuerytoggle()関数を使用して、連続するクリックごとに何をするかを指定できます。

$(".visibilitybutton").toggle(function(){
    $(this)
        .attr("title","Invisible")
        .find("span").toggleClass("icon84 icon85");
}, function(){
    $(this)
        .attr("title","Visible")
        .find("span").toggleClass("icon84 icon85");
});

より効率的にしたい場合は、いくつかの優れたテクニックを使用して、すべてを1つのjQuery急降下で行うことができます。

var vis = ["Invisible","Visible"];
$(".visibilitybutton").click(function(){
    var i = 0;
    $(this)
        .attr("title",vis[i])
        .find("span").toggleClass("icon84 icon85");
    i = (i==0)?1:0;
});

さらに、要素を追加すると非表示になり、削除すると表示されるクラスを作成することもできます（display:noneCSSで適用されたクラス名は正常に機能します）。

$(".visibilitybutton").click(function(){
    $(this)
        .toggleClass("hide")
        .find("span").toggleClass("icon84 icon85");
});
于 2012-07-23T17:49:27.117 に答える
1

一意のIDが必要です。したがって、クラスごとにアイテムを選択する必要があります。トグル（）を使用して連続クリックを処理し、トグルクラス（）を使用してクラスのスワッピングを処理できます。

HTML：

<a href="#" class="button" title="Visible"><span class="icon icon84"></span></a>
<a href="#" class="button" title="Invisible"><span class="icon icon85"></span></a>

Javascript：

 $(document).ready(function () { 
    $('.button').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('.icon85').toggleClass('icon85', 'icon84');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('.icon85').toggleClass('icon84', 'icon85');
    });
 });
于 2012-07-23T17:49:39.333 に答える
0

属性は、id各要素に固有であると想定されています。属性を各ハイパーリンクidの属性に変更します。class

次に、jQueryコードで、クラス名でハイパーリンクを取得します。

$('.visbilitybutton').click(function() {
    // code goes here
});

イベントハンドラーでは、次のtitleように属性のテストを使用する必要があります。

$('.visibilitybutton').click(function() {
    $this = $(this);
    if ($this.attr("title") == "Visible")
        $this.attr("title", "Invisible").find("span")
            .removeClass("icon85").addClass("icon84");
    else
        $this.attr("title", "Visible").find("span")
            .removeClass("icon84").addClass("icon85");
});
于 2012-07-23T17:56:15.623 に答える