Question

我创建了一个粗略版本的网站，它将拉动并显示数百个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。

是否有任何方法可以更改代码，以便我不必复制这么多次？

Answer 1

将类更改为pdf（或所有元素的相同内容），然后使用HTML5 data-*属性将每个特定的属性链接到书签元素：

<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。如果您选择document之外的其他内容，则还需要将其包装在DOM ready（$(document).ready()）处理程序中。

Answer 2

用一个带jquery的类循环它们然后通过$（this）对象获取id，如下所示：

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

然后，您可以将这些ID用于个人pdf的书籍制作。

Answer 3

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提供的this fiddle小提琴：

Javascript - 简化代码

3 个答案: