成功更新值（使用raty和bootstrap popover）

Question

我正在使用带有popover的引导程序jquery-raty。我有hidden div使用JS函数content:在popover上显示它们。我想更新隐藏div中的一些属性。 假设我在隐藏的div中有data-rating属性。我想更新data-rating值。我正在使用以下声明。

('#hidden_div_1`).data('rating', '25');

当我打印数据属性console.log($('#hidden_div_1').data('rating'));时，我得到25这是正确的。但当我再次悬停在特定对象上以显示弹出窗口时，我得到old attribue值。值为destroying when popover disappeared。我不知道为什么。有人帮忙吗？

这是我的full jquery code。 这是小jsfiddle

由于

编辑1：$('#hidden_div_1').data('rating', '25');

编辑2：很奇怪。 data-rating值不会改变。我附加了console.log输出。

代码＆gt;

$('.link-container a').popover({
        content : function() { return $(this).siblings('.popover-content').html(); },
        trigger: 'click',
        html: true
    }).click(function(){
      $('.ratings').raty({
        score: function() { return $(this).attr('data-rating'); },
        click: function(score, evt, data) {
            //alert(score);
            var currentId = $(this).attr('id');
            console.log($("#"+currentId).data('rating'));
            alert(currentId);
            $("#"+currentId).attr('data-rating', score);
            console.log($("#"+currentId).data('rating'));
            $("#"+currentId).data('rating', score);
            console.log($("#"+currentId).data('rating'));

        },
          path: '/static/img/rating/',
      });
    });

alert(currentId);打印correct ID。

Answer 1

修改

我更详细地研究了这个问题，问题是你将内容传递给Bootstrap popover。

此html内容包含一个ID（例如#hidden_div_1），但问题是您传递给Bootstrap popover 的所有内容都会在该popover中复制。

换句话说，您最终会遇到重复的ID，而JQuery不知道您要引用的是哪个元素。

所以解决方法是将数据信息放入容器div（在本例中为link-container），如下所示：

<div class="link-container" data-rating="1" data-price="10">
    <a href="#" data-title="Title 1" id="r1">Click Here</a>
    <div class="temp-popover-content hidden">
        <p> Click on following images</p>
        <div class="ratings"></div>
        <p>Some content 1</p>
    </div>
</div>

然后你可以在不混淆JQuery的情况下对这个链接容器存储数据，如下所示：

$('.link-container a').popover({
    content : function() { return $(this).siblings('.temp-popover-content').html(); },
    trigger: 'click',
    html: true
}).click(function(e) {
  // Added this because popovers get confused when more than one with a raty is open
  $('.link-container a').not(this).popover('hide');
  // storage refers to the link-container div
  var storage = $(this).parent();
  $('.ratings').raty({
        score: function() { return storage.data('rating'); },
        click: function(score, evt, data) {
            storage.data('rating', score);
            console.log("Data: "+storage.data('rating')); 
        }
  });
});

Fiddle is here

Answer 2

好像你错过了'$'。它应该是

$('#hidden_div_1').data('rating', '25');