单击时更改<summary>元素的文本

debugcn 发表于 Dev

乔恩

我想选择一个<details>元素，然后单击下拉菜单中的一个项目。单击下拉菜单中的项目后，我希望该项目的文本值替换<summary>元素中的文本。

因此，<summary>页面加载并显示“选择主题”。然后，用户单击箭头并选择“ 1”。单击后，<summary>显示“ 1”而不是“选择主题”。到目前为止，这是代码的JSFiddle，但是我一直坚持让文本替换原始<summary>文本：

JSFiddle：https：//jsfiddle.net/3mh4cdvf/5/

HTML：

<details id="tesing2"><summary>Select Topic</summary>
<div class=div-class style="cursor: pointer;">1</div>
<div class=div-class style="cursor: pointer;">2</div>
</details>

jQuery的：

$('.div-class').click(function (event) {
setTimeout(function() {
var topic = event.target.innerText;
$(summary).innerHTML = topic;
}, 20);
});

任何帮助是极大的赞赏。

斯瓦蒂

您可以.text()用来设置摘要元素的文本。另外，如果有多个这样的元素，您可以提供一些id或class来区分它们。

演示代码：

$('.div-class').click(function(event) {
  setTimeout(function() {
    var topic = event.target.innerText;
    $("summary").text(topic); //use .text to set value or html
  }, 20);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details id="tesing2">
  <summary>Select Topic</summary>
  <div class="div-class" style="cursor: pointer;">1</div>
  <div class="div-class" style="cursor: pointer;">2</div>
</details>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。