0

どのボタンが押されたかに基づいて新しいdivを表示および非表示にするjqueryがあります。ボタンではなく、独自のテキスト/画像を挿入して、同じように機能させ、新しいウィンドウを表示および非表示にしたいと考えています。

ここにjqueryがあります：

<script>
    $(document).ready(function(){

        $(".buttons").click(function () {
        var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");
        });

      });
</script>

これは、aa href タグに変更したいボタンの 1 つのコードです。

<input type="button" id="button1" class="buttons" value="div1"></input>

どんな助けでも大歓迎です。ありがとう。ピア

4

1 に答える 1

5

jQuerydata()メソッド ( http://api.jquery.com/data/ ) を使用してアンカー要素 (div ID) に任意のデータを格納し、その値を使用して適切な div を表示できます。

<div id="div1">div one</div>
<div id="div2">div two</div>
<a href="#" class="abuttons" data-divid="div1">link</a>

<script>
$(document).ready(function(){
    $(".abuttons").click(function () {
        var idname= $(this).data('divid');
        $("#"+idname).show("slow").siblings().hide("slow");
    });
});
</script>

ID の代わりにクラス名を使用して 2 つの div を表示する場合は、achor タグにクラス名を保存し、表示する各 div に同じクラスを設定し、a の.代わりに aを使用して jQuery で参照します。#

<div id="div1" class="divclass">div one</div>
<div id="div2" class="divclass">div two</div>

<a href="#" class="abuttons" data-divclass="divclass">link</a>

<script>
$(document).ready(function(){
    $(".abuttons").click(function () {
        var classname= $(this).data('divclass');
        $("."+classname).show("slow").siblings().hide("slow");
    });
});
</script>
于 2012-10-15T14:08:52.643 に答える