更新数据属性

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"> 。当我现在更改文本时， <li>的data-content仍包含旧文本，但我希望它是新文本，已将其放置在输入字段中。

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

Answer 1

像这样的http://jsbin.com/tesiduhozi/5/吗？ 您可以使用.data（）存储所选锂电池的链接

$(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元素哈希数据对象相关联的任何对象。 每次新点击都会更新此链接

任何时候我们都可以使用$('.whatever').data('selectedLi')从数据中读取此链接。 因此，在“按钮”上单击我们将读取此值。 如果已定义-这意味着我们将保存最后单击的li元素。 因此我们可以将其（我们保存jQuery元素）用作jQuery元素

有关更多详细信息-在https://api.jquery.com/data/上查询或阅读文档