如何通过类和数据属性更新div

我想通过选择属性值为变量的类名和数据属性来更新div。另一方面使答案（类似问题）建议这种做法：如何通过类和数据属性更新div

$(".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>

来源

2017-03-07 RandomHandle

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

<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>

.SampleClass[data-id=" + selectedId + "]之间没有空间，如果你把空间就意味着类.SampleClass数据的子属性ID。
使用data-id选择不id

来源

2017-03-07 03:20:01 guradio

这解决了这个问题。＃2显然有效，但我以前看过的所有样本都省略了“数据”部分。 – RandomHandle

省略了数据？你在这里提到什么？ data-id属性？不，你不能删除那个，因为它不会选择所需的属性 – guradio

也许他只是''.SampleClass [id =“+ selectedId +”]'?? – Rick

如何通过类和数据属性更新div

回答

相关问题