Question

我试图通过选择其类名和数据属性来更新div，其中属性值是变量。其他SO答案（针对类似问题）提出了这种方法：

$(".SampleClass [id='"+selectedId + "']").text("Updated text");

然而，当测试时，它似乎不起作用。应该发生的是，第二个div的内容应为“此特定div已更新”。相反，div包含“Div 2未更改”。

我应该采用什么方法来达到预期效果？这个例子是简单的HTML，但我试图将它应用到一个动态页面 - 这就是为什么我不会对它进行硬编码。

<div class="SampleClass" data-id="1">Div 1 is unchanged</div>
<div class="SampleClass" data-id="2">Div 2 is unchanged</div>
<div class="SampleClass" data-id="3">Div 3 is unchanged</div>

<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        // test basic functionality: div with data-id=2 should be updated 

        var selectedId = 2;  
        $(".SampleClass [id="+selectedId + "]").text("This specific div has been updated.");
    });
</script>

Answer 1

＆＃13;

var selectedId = 2;
$(".SampleClass[data-id=" + selectedId + "]").text("This specific div has been updated.");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SampleClass" data-id="1">Div 1 is unchanged</div>
<div class="SampleClass" data-id="2">Div 2 is unchanged</div>
<div class="SampleClass" data-id="3">Div 3 is unchanged</div>

＆＃13;

.SampleClass[data-id=" + selectedId + "]之间没有空格，如果你放置空格，则表示类.SampleClass的子项具有数据属性id。
使用data-id选择器而不是id

如何按类和数据属性更新div

1 个答案: