1

何百もの pdf をプルして表示するサイトの大まかなバージョンを作成しました。ユーザーがクリックしたら、各pdfをブックマークできるようにしたい。これを行うことを考えることができる唯一の方法は次のとおりです。

<script>
    $(document).ready(function(){
      $(".pdf1").click(function(){
        if ($('#bookmark1').is(':visible')) {
                $("#bookmark1").css("display", "none");
            } else {
                $("#bookmark1").css("display", "inline");
            }                       
      });

      $(".pdf2").click(function(){
        if ($('#bookmark2').is(':visible')) {
                $("#bookmark2").css("display", "none");
            } else {
                $("#bookmark2").css("display", "inline");
            }
      });

      $(".pdf3").click(function(){
        if ($('#bookmark3').is(':visible')) {
                $("#bookmark3").css("display", "none");
            } else {
                $("#bookmark3").css("display", "inline");
            }
      });

      $(".pdf4").click(function(){
        if ($('#bookmark4').is(':visible')) {
                $("#bookmark4").css("display", "none");
            } else {
                $("#bookmark4").css("display", "inline");
            }
      });
    });
</script>

それぞれに異なる ID を持つ上記のコードの 100 以上のバージョンを作成する必要がないため、これは最適ではありません。

これを何度も複製する必要がないように、コードを変更する方法はありますか?

4

3 に答える 3

1

クラスを単純なpdfもの (またはすべての要素で同じもの) に変更し、HTML5data-*属性を使用して特定の各要素をブックマーク要素にリンクします。

<a href="#" class="pdf" data-bookmark="bookmark1">Click me</a>
<div id="bookmark1">Some content</div>

次に、jQuery:

$(document).ready(function() {
    $('.pdf').click(function(e) {
        var bookmarkId = $(this).attr('data-bookmark');
        var bookmark = $('#' + bookmarkId);
        if(bookmark.is(':visible')) {
            bookmark.css('display', 'none');
        }
        else {
            bookmark.css('display', 'inline');
        }
    });
});

または、何百もの要素があるため、単一の委任されたイベント ハンドラーの方が適切なオプションになる場合があります。

$(document).on('click', '.pdf', function(e) {
    var bookmarkId = $(this).attr('data-bookmark');
    var bookmark = $('#' + bookmarkId);
    if(bookmark.is(':visible')) {
        bookmark.css('display', 'none');
    }
    else {
        bookmark.css('display', 'inline');
    }
});

.pdfを使用するのではなく、すべての要素を含み、DOM 内でそれらにできるだけ近い要素を選択するのが理想的ですdocument。それ以外のものを使用する場合は、それを DOM Ready ( ) ハンドラーdocumentでラップする必要もあります。$(document).ready()

于 2013-04-03T15:38:55.860 に答える
0

jquery を使用してクラスでそれらをループし、次のように $(this) オブジェクトを介して ID をフェッチします。

$( ".pdf" ).each(function() {
    alert(this.id); // will contain the id of each pdf
});

その後、これらの ID を使用して、個々の PDF のブックメイキングを行うことができます。

于 2013-04-03T15:40:38.537 に答える
-1 
for (var i = 1 ; i < 5 ; ++i) {
    $(".pdf" + i).click(function(){
        var id = $(this).attr("class");
        id = "#bookmark" + id.substring(3);
        if ($(id).is(':visible')) {
                $(id).css("display", "none");
            } else {
                $(id).css("display", "inline");
            }                       
    });
}

@AnthonyGrist によるフィドルに基づくこのフィドルを参照してください。

于 2013-04-03T15:38:52.523 に答える