Question

我正在努力更新html中的一些数据属性。

我有这样的事情：

<div class="navigation">
    <ul>
        <li data-content="someContent"></li>
        <li data-content="someOtherContent"></li>
     </ul>
     <ul>
        <li></li>
        <li></li>
     </ul>
 </div>

<div class="content" data-content="">
    <div class="whatever"></div>
    <input id="someID">
    <button>change TExt of div></button>
</div>

现在好了，当我点击其中一个<li>时，data-content中存储的文字已加载到<div class="whatever>。

请注意，有一个input。此input更改了<div class="whatever">的内容。当我立即更改文本时，data-content的{{1}}仍然包含旧文本，但我希望它是新文本，我已经输入了输入字段。

现在我的问题是，我不能再选择<li>了，因为我没有<li> - Objet再代表当前的$(this)。

Answer 1

有人喜欢http://jsbin.com/tesiduhozi/5/吗？您可以使用.data（）存储所选li的链接

$(function() {
  $(document.body).on('click', 'li[data-content]', function() {
    var $this = $(this);
    var content = $this.data('content');
    $('.whatever').html(content);
    $('#someID').val(content);
    $('.whatever').data('selectedLi', $this);
  });


  $(document.body).on('click', 'button', function() {
    var $li = $('.whatever').data('selectedLi');
    var content = $('#someID').val();
    if($li) {
      $li.data('content', content);
    }  

    $('.whatever').html(content);
  });
});

在此代码中，当您点击li [data-content]时，我们会更新'.whatever'内容并将所选li的链接存储到.whatever元素$('.whatever').data('selectedLi', $this);的数据 .data（）函数允许存储与DOM元素Hash-data对象关联的任何对象。每次新点击都会更新此链接

我们可以随时通过$('.whatever').data('selectedLi')的数据阅读此链接。所以在'按钮'上点击我们读取这个值。如果它被定义 - 这意味着我们保存最后点击的li元素。所以我们可以使用它（我们保存jQuery元素）作为jQuery元素

有关详细信息，请查询或阅读https://api.jquery.com/data/

上的文档

更新数据属性

1 个答案: