Question

我正在尝试编辑这个剧透js代码，添加一个div作为每个剧透的按钮。这是原始代码（它使用jQuery）：

function spoilerToggle() {
  var sliderID = "#spoiler-slider" + $(this).attr("slider-id");
  if($(sliderID).css("display") == "none") {
    $(this).text("[-]");
     $(this).attr("title", "Hide Spoiler")          
  }
  else {
     $(this).text("[+]");
     $(this).attr("title", "Show Spoiler")
  }
  $(sliderID).slideToggle('fast');
}
function addSpoilers() {
  $("div.spoiler-text").each(addBlockSpoiler);
  $(".block-spoiler-toggle").click({"spoiler": "block"}, spoilerToggle);
}
function addBlockSpoiler(i) {
  $(this).attr("id", "spoiler-slider" + i);
  $("<div class='block-spoiler'>spoiler <span class='block-spoiler-toggle' title='Show Spoiler' slider-id='" + i + "'>[+]</span></div>").insertBefore(this);
}
$(document).ready(addSpoilers);

现在，如果我使用它，所有具有class =“spoiler-text”的div将具有带有“扰流”文本的div，并且[+]或[ - ]打开/关闭显示/隐藏它们。我正在尝试编辑它，如下所示：

function spoilerToggle() {
  var sliderID = "#spoiler-slider" + $(this).attr("slider-id");
  if($(sliderID).css("display") == "none") {
    $(this).text("[-]");
     $(this).attr("title", "Hide Spoiler")          
  }
  else {
     $(this).text("[+]");
     $(this).attr("title", "Show Spoiler")
  }
  $(sliderID).slideToggle('fast');
}
function addSpoilers() {
  $("div.spoiler-text").each(addBlockSpoiler);
  $(".block-spoiler-toggle").click({"spoiler": "block"}, spoilerToggle);
}
function addBlockSpoiler(i) {
  $(this).attr("id", "spoiler-slider" + i);
  // $("<div class='block-spoiler'>spoiler <span class='block-spoiler-toggle' title='Show Spoiler' slider-id='"+i+"'>[+]</span></div>").insertBefore(this);
  $("div.block-spoiler-toggle").each($("div.block-spoiler-toggle").attr("slider-id", i));
}
$(document).ready(addSpoilers);

这应该找到带有class =“block-spoiler-toggle”的div，添加“slider.id = 0”或1或2等等来使用它们来显示/隐藏我的剧透div。显然，在我的html页面中，div.spoiler-text和div.block-spoiler-toggle的数量是相同的，所以id也是一样的。

但这不起作用，我无法理解为什么。有人能帮助我吗？我的编辑出了什么问题？

提前致谢：D

编辑：我的html页面：http://uxiedex.altervista.org/pokedex-xy/ jsFiddle：http://jsfiddle.net/v3xZA/

Answer 1

如果你想要所有的div：

$(document).ready(function(){
    alert(  $('div').length  );
    // Or native js:
    alert( document.getElementsByTagName('div').length );
});

Answer 2

您的错误就在这一行：

$("div.block-spoiler-toggle").each($("div.block-spoiler-toggle").attr("slider-id", i));

错误是由jQuery的.each方法必须采用函数引起的，所以你可能想要这个：

$("div.block-spoiler-toggle").each(function(){
    $("div.block-spoiler-toggle").attr("slider-id", i))
});

Answer 3

试试这个简化版。

$(function () {
  alert($('div').length);
});

$(function () {})是$(document).ready(function () {})
所有选择器都使用document作为根节点，因此您无需指定$(document).find()

Answer 4

$(document).ready(function() {
    var count = 0;

    $(document).find('div').each(function(){
        count++;
    });

    alert(count);
}):

这应该这样做。随意将其转换为函数并在现有代码中调用它。

我的编辑出了什么问题？我正在尝试编辑剧透js代码（jQuery）

4 个答案: