如何选择value属性的值？

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。

为了实现这一点，我强烈建议做一些改变：

• 给all一个更独特的类，例如.com。我怀疑.md是一个非常通用的类，您可能会在同一页上的其他元素中使用它，所以让我们完成这个任务。
• 不要使用保留的value属性，因为它是为类似输入的元素保留的。改用data-*属性:例如，我们可以使用data-range="7-10"。更好的是，您可以使用data-min和data-max，这样我们就可以避免解析范围。我把后者留给你了。
• 不要使用内联JS，而是依赖addEventListener将单击事件绑定到<a>元素

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

1. 单击<a>元素时，获取其最近父元素的data-range值。这可以使用.closest('div.com')完成，然后使用API接口检索范围。
2. 拆分data-range属性，并记住使用+将其转换为数字
3. 使用ES6阵列破坏将min和max变量分配给已解析的data-range
4. 检查所有.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);
});

或者如果您想使用value属性

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