使用jQuery的目標特定元素

我有一個下拉菜單，根據用戶在下拉列表中選擇的內容更改跨度的文本值。演示：http://jsfiddle.net/ebstcrjy/使用jQuery的目標特定元素

現在，我的代碼瞄準下一個跨度它看到。

我想根據類別startdate定位特定跨度。

如何修改我的代碼以定位此特定元素？

$(function() {   
    $('#usertype').change(function() {   
     $(this).next("span").text($('#usertype option:selected').text()); 
    });  
});

來源

2017-04-18 michaelmcgurk

jQuery使用CSS選擇器：

$('.startdate').text($('#usertype option:selected').text());

來源

2017-04-18 12:42:31

非常感謝，Dimitri L. - 完美地工作：http://jsfiddle.net/ebstcrjy/2/ – michaelmcgurk

@michaelmcgurk;這會更改頁面中的所有「.startdate」元素。如果你只想影響下一個，這是不正確的。 –

我很酷，它改變了這一點。我可能會用'＃startdate'來定位目標。謝謝你的建設性意見:) – michaelmcgurk

$(function() {   
    $('#usertype').change(function() {   
     $(this).siblings("span.startdate").text($('#usertype option:selected').text()); 
    });  
});

來源

2017-04-18 12:42:14

使用css class selector jQuery中。根據你的標記，你只有一個使用startDate類的元素。如果你想得到更具體的，你可以分配該元素的ID，然後使用ID選擇器。

$(function() {   
     $('#usertype').change(function() {   
      $(".startdate").text($('#usertype option:selected').text()); 
     });  
    });

從文檔：

的jQuery（的「.class」）類：

的類來搜索。一個元素可以有多個類;只有其中一個必須匹配。

這裏的a working fiddle。

來源

2017-04-18 12:42:50

但'.startDate'是一個跨度如何確認？ – Jai

這是行不通的，.next（）只看第一個兄弟。 –

@ l.varga更新。只是一個複製和粘貼錯誤:-) –

這將改變只有.startdate跨度是不斷變化的選擇元素之後：

$(function() {   
 
     $('#usertype').change(function() {   
 
      $(this).siblings('#' + $(this).attr('id') + '~span.startdate').text($('#usertype option:selected').text()); 
 
     });  
 
    });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<form action="" method="post"> 
 
    <input type="hidden" id="myhidden3" name="quantity" value="1" /> 
 
    <span class="startdate">first span</span> 
 
    <select id='usertype'> 
 
    <option value='1'>Start Date</option> 
 
    <option value='2'>End Date</option> 
 
    <option value='3'>End Date</option> 
 
    </select> 
 
    <span>Hello!</span> 
 
    <span class="startdate">Start Date</span> 
 
</form>

來源

2017-04-18 12:43:42

只是類型和類選擇範圍，像這樣

$("span.startDate").text($('#usertype option:selected').text());

來源

2017-04-18 12:44:29

使用jQuery的目標特定元素

回答

相關問題