Question

我试图通过切换功能隐藏带有子项的评论，但我想基于value属性将其隐藏。

这是我的js函数：

function toggle(id, lft, rgt) {
    var kids = (rgt - lft - 1) / 2;
    if (kids >= 1) {
        var element = document.querySelectorAll("div.md#com" + id)[0].getAttribute('value');
        var low = Number(element.split('-')[0]);
        var high = Number(element.split('-')[1]);
        for(var i = low + 1; i <= high - 1; i += 1){
            var x = document.querySelectorAll("div.md#com" + i)[0]
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    }

这是结果：

<div>
    <div id="com4" class="md" value="7-10">yellow 
        <a onclick="toggle(4, 7, 10)" href="javascript:void(0)">[-]</a>
    </div>
    <div id="com5" class="md" value="8-9">not collapsing</div> //because of the id but I want to toggle them based on the value attribute
    <div id="com8" class="md" value="10-11">collapses</div>
 </div>

但我想要

<div>
    <div id="com4" class="md" value="7-10">yellow 
        <a onclick="toggle(4, 7, 10)" href="javascript:void(0)">[-]</a>
    </div>
    <div id="com5" class="md" value="8-9">Should collapse</div>
    <div id="com8" class="md" value="10-11">Should not collapse</div>
 </div>

Answer 1

假设您想要的行为是在单击<a>元素时，您要根据其父级value属性中提供的数字范围来隐藏元素。例如。在您的示例中，您将要隐藏#com8，因为它位于7-10而不是#com5的范围内。

为此，我强烈建议您进行一些更改：

为您的评论全部提供一个更独特的类，例如.com。我怀疑.md是一个非常通用的类，您可能会在同一页的其他元素中使用它，所以让我们结束它。
请勿使用保留的value属性，因为该属性是为类似输入的元素保留的。请改用data-*属性：例如，我们可以使用data-range="7-10"。更好的是，您可以使用data-min和data-max，这样我们就可以避免解析范围。我让后者留给你。
请勿使用内联JS，而是依靠addEventListener将点击事件绑定到您的<a>元素

现在，解决方案：如果我们稍微调整一下逻辑，实际上是非常可行的：

单击<a>元素时，获取其最接近的父元素的data-range值。可以使用.closest('div.com')，然后使用dataset API来检索范围。
拆分data-range属性，并记住使用unary +
使用ES6 array destructuring将min和max变量分配给已解析的data-range
遍历所有.com元素：
- 如果该元素与触发器元素的父元素匹配，我们将忽略它
- 否则，我们检查其ID（使用String.prototype.substring()解析以去除前3个字符）是否位于数字范围之内或之外
- 然后，使用此布尔值确定元素的style.display属性

请参见下面的概念验证：

const collapseButtons = document.querySelectorAll('.collapse');

Array.from(collapseButtons).forEach(collapseButton => {
  collapseButton.addEventListener('click', e => {
    e.preventDefault();
    
    // Use ES6 destructuring to assign min/max values
    const [min, max] = e.target.closest('div.com').dataset.range.split('-').map(v => +v);
    
    const comments = document.querySelectorAll('.com');
    Array.from(comments).forEach(comment => {

      // If the element matches the trigger element's parent, do nothing
      if (comment === e.target.closest('div.com')) {
        return;
      }
     
      // Otherwise, decide if we should hide or show it
      const id = +comment.id.substring(3);
      const shouldHide = id < min || id > max;
      comment.style.display = shouldHide ? 'none' : 'block';
    });
  });
});

<div>
  <div id="com4" class="com md" data-range="7-10">yellow
    <a class="collapse" href="#">[-]</a>
  </div>
  <div id="com5" class="com md" data-range="8-9">Should collapse</div>
  <div id="com8" class="com md" data-range="10-11">Should not collapse</div>
</div>

Answer 2

试试看

<div class="box" name="box1"></div>
<div class="box" name="box2"></div>
<div class="box" name="box3"></div>

$('.box').on('click', function(){
    var value = $(this).attr('name');
  alert(value);
});

或者如果您想使用值属性

$('.box').on('click', function(){
    var value = $(this).attr('value');
  alert(value);
});

如何选择值属性的值？

2 个答案: