Question

按钮是否可以从其'父元素继承''value属性？

我有一个li中的3个按钮，我想要检索li中所有按钮的共同值以及按下的特定按钮（我可以使用唯一ID来完成）。对任何形式的重组都开放，这样我就可以轻松实现这一目标。

提前致谢！

编辑：下面是我正在处理的一个例子，li的值是我想要为所有三个按钮检索的值，以及一些定义了采取行动的详细信息。

{config: Object
data: null
headers: (name)
status: 0
statusText: ""}

Answer 1

在onclick（sidebarUserOptions）中，您可以引用此变量，获取父节点，然后从该父节点获取值。

所以，使用jQuery：

$(this).parent().attr('value');

Here is a working CodePen example

Answer 2

无需重组。关键是检测li上的点击事件而不是button。您可以在单击功能中使用event.target来访问单击的按钮。这是一个fiddle演示这个概念。第一个函数doToAll只是一个辅助方法，用于迭代一组dom元素，并且输出div用于显示函数结果的简单方法。

HTML：

    <div id="output"></div>
<ul>
<li data-info="first li">
  <button>
  One
  </button>
  <button>
  Two
  </button>
  <button>
  Three
  </button>
</li>
<li data-info="second li">
  <button>
  One
  </button>
  <button>
  Two
  </button>
  <button>
  Three
  </button>
</li>
</ul>

SCRIPT：

function doToAll(elems, callback){
  var len = elems.length;
  while(--len > -1){
    callback(elems[len]);
  }
}

var lis = document.querySelectorAll('li'),
  output = document.getElementById('output');

doToAll(lis, function(li){
  li.addEventListener('click', function(e){
    var tgt = e.target, //get the element that was clicked on
      liparent = this; //the click event is bound to the li, so 'this' still refers to the list item and not the button
    if(tgt.tagName == "BUTTON"){//check to make sure a button was clicked, and not something else inside the li
      output.textContent = tgt.textContent + ', ' + liparent.getAttribute('data-info');
       //reports a piece of data from the button and the li
    }
  })
})

Answer 3

理论上是的，attr和CSS variables：

＆＃13;

#parent {
  --value: attr(data-value);
}
#parent > button::after {
  content: var(--value);
}

＆＃13;

<div id="parent" data-value="Hello!">
  <button type="button"></button>
  <button type="button"></button>
</div>

＆＃13;

但请注意：

对于与attr不同的属性，没有主要实施支持content。
目前只有Firefox和Safari支持CSS变量。
CSS伪元素应仅用于装饰目的，而不是用于插入内容。

HTML按钮元素可以从父级继承它的值吗？

3 个答案: