Question

我试图在单击其名称时切换div。

我的页面中有多个类似的偶像，我希望它可以像以前那样工作＆＃34;点击<p id= "d2">时=＆gt; <div id="d2">切换了＃34;。

我尝试了这些功能：

$(document).ready(function(){
    $("p").click(function(){
        $("div#" + $(this).attr('id')).toggle();
    });
});

function rgt() {
    //document.body.innerHTML = "";
    var id = "d" + this.id;
    var situation = document.getElementById(id).style.display;

    if (situation == "none") {
        situation = "block";
    }
    else {
        situation = "none";
    }
}

 function showHide(theId) {
    if (document.getElementById("d" + theId).style.display == "none") {
        document.getElementById("d" + theId).style.display = "block";
    }
    else {
        document.getElementById("d" + theId).style.display = "none";
    }
}

我无法让它发挥作用！为什么？

浏览器说：＆＃34; no＆＃39; display＆＃39;属性为null＆＃34; ...

我将非常乐意用简单的jquery来解决它

Answer 1

确保您的id属性是唯一的

假设您的id属性是唯一的，they are required to be per the specification：

id属性指定其元素的唯一标识符（ID）。该 value必须在元素的主子树中的所有ID中唯一并且必须至少包含一个字符。该值不得包含任何空格字符。

您应该考虑将id属性重命名为d{n}，将段落重命名为p{n}，如下所示：

<button id='p1'>p1</button> <button id='p2'>p2</button> <button id='p3'>p3</button>
<div id='d1'><pre>d1</pre></div>
<div id='d2'><pre>d2</pre></div>
<div id='d3'><pre>d3</pre></div>

允许您使用以下函数来处理切换操作：

$(function(){
  // When an ID that starts with P is clicked
  $('[id^="p"]').click(function(){
      // Get the proper number for it
      var id = parseInt($(this).attr('id').replace(/\D/g,''));
      // Now that you have the ID, use it to toggle the appropriate <div>
      $('#d' + id).toggle();
  })
});

使用唯一ID的示例

你可以see an interactive example of this approach here并在下面演示：

考虑使用data-*属性

HTML支持使用数据属性，这些属性可用于通过jQuery定位特定元素并将它们与其他操作相关联。例如，如果您在每个＆＃34; p＆＃34;上创建一个属性。要素如下：

<button data-toggles='d1'>p1</button>
<button data-toggles='d2'>p2</button>
<button data-toggles='d3'>p3</button>

然后只需更改您的jQuery即可将其用作选择器：

$(function(){
    // When an element with a "toggles" attribute is clicked
    $('[data-toggles]').click(function(){
         // Then toggle its target
         $('#' + $(this).data('toggles')).toggle();
    });
});

Answer 2

你在看吗？

$("#p1").on("click", function() {
    $("#d1").toggle();
 });

js fiddle：https://jsfiddle.net/Jomet/09yehw9y/

Answer 3

＆＃13;

$(document).ready(function () {
    $(".btnPos").on('click', function () {

    for(var i=1; i<=$(".txt").val(); i++)
    {
        $('#positions').append('<input type="checkbox" name="myCheckbox" />' + "Pos " + i);
    }
    });
});

below is the working fiddle

＆＃13;

jQuery(function($){
  var $toggles = $('.divToggle');
  var $togglables = $('.togglableDiv');
  
  $toggles.on('click', function(){
    //get the div at the same index as the p, and toggle it
    $togglables.eq($toggles.index(this)).toggle();
  });
});

＆＃13;

使用类的最小方法。该解决方案假设dom中p元素的顺序与div在顺序中的顺序相同。它们不必是连续的，但是这个解决方案的顺序很重要。

Answer 4

`ids`不是您要找的机器人。

id必须是唯一的。如果你想对某些人建议使用类进行分类。实际上你可以使用它们中的一些来制作一些奇特的东西。这样的事情怎么样：

<p class="toggle one">one</p>
<div class="toggle one" style="display:none">content one</div>

直接向前。作为开关或可切换的每个元素都会获得类toggle。每对交换机和可切换都会获得一个额外的标识符（例如one，two，...）。

简单的JScript实现：

现在如何不使用JQuery来处理它？当然，它非常方便，但它隐藏了最终想要了解她/她自己的所有东西！

＆＃13;

var myToggle = {};
(function(module) {
  "use strict";

  (function init() {
    var elements = document.getElementsByClassName("toggle");
    var element;

    var i = elements.length;
    while (i) {
      i -= 1;

      element = elements[i].className;
      elements[i].setAttribute("onclick", "myToggle.swap(\"" + element + "\")");
    }
  }());

  module.swap = function(element) {
    var couple = document.getElementsByClassName(element);

    var i = couple.length;
    while (i) {
      i -= 1;

      if (couple[i].style.display === "none" && couple[i].tagName === "DIV") {
        couple[i].style.display = "block";
      } else if (couple[i].tagName === "DIV") {
        couple[i].style.display = "none";
      }
    }
  };
}(myToggle));

＆＃13;

<p class="toggle one">one</p>
<div class="toggle one" style="display:none">content one</div>

<p class="toggle two">two</p>
<div class="toggle two" style="display:none">content two 1</div>
<div class="toggle two" style="display:none">content two 2</div>

＆＃13;

var myToggle = {}是我们用来保存我们的小程序的对象。它可以防止我们的代码与其他声明冲突。因为如果我们网站上的某个插件已经声明了一个名为swap()的函数呢？一个会覆盖另一个！使用这样的对象可以确保我们的版本现在称为myToggle.swap()！

可能很难理解它是如何得到这个名字的。重要提示：看起来像这样...... (function() { CODE } ()) ...被称为immediately-invoked function expression。 iffy！它是一个立即执行的函数，并将其变量保存到自身。或者可以在最后一次（）对中将它们提供给你。

其他一切都是如此冗长......没有花哨的正则表达，黑客或图书馆。进入它！

div＃d1在p＃1上切换点击 - howTo？

4 个答案:

`ids`不是您要找的机器人。

div＃d1在p＃1上切换点击 - howTo？

4 个答案:

ids不是您要找的机器人。

`ids`不是您要找的机器人。