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。

有什么办法可以更改代码，这样我就不必重复这么多次了？

4

3 回答 3

1

将类更改为 simple 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. 如果你想要别的东西，document你还需要将它包装在一个 DOM 就绪 ( $(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 回答