Jquery選擇器中使用變量實現(xiàn)動態(tài)選擇例子

2021-5-14    前端達人

這篇文章主要介紹了Jquery選擇器中使用變量實現(xiàn)動態(tài)選擇例子,這樣做的好處我們可以動態(tài)選擇一些元素,核心思想其實就是用字符串組合,需要的朋友可以參考下


例子一:

例子二:


<table>
  <tr>
    <th>用戶名</th>
    <th>狀態(tài)</th>
  <tr>
  <tr>
    <td>張三</td>
    <td data-uid="10000">正常</td>
  <tr>
  <tr>
    <td>李四</td>
    <td data-uid="10001">凍結</td>
  <tr>
  <tr>
    <td>王二麻子</td>
    <td data-uid=10002>凍結</td>
  <tr>
</table>
 
<script type="text/javascript">
$(document).ready(function(){
  var uid = 1001;
  $("td[data-uid = "+ uid +"]").html('正常');
}
</script>





<script type="text/javascript">
 $(function(){
  alert(123);
  var v=4;
  var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了
  console.info(test);
  var testValue=test.attr({"checked":true});
  console.info(testValue);
 });
 </script>
  
 <body>
  This is my JSP page. <br>
  <table>
 <tr>
 <td>性別:</td>
 <td>
  <input name="sex" type="radio" value="0"/>男 0
  <input name="sex" type="radio" value="1"/>女 1
  <input name="sex" type="radio" value="2"/>女 2
  <input name="sex" type="radio" value="3"/>女 3
  <input name="sex" type="radio" value="4"/>女 4
 </td>
 </tr>
  </table>
 </body>




例子三、jQuery中選擇器參數(shù)使用變量應該注意的問題

這是原來的代碼


var li_index = $(this).index();
 
var $content_index = li_index + 2;
 
var $content_progress = $(“div.content:eq(” + $content_index + “)”);
 
var $newavalue = $(this).find(“a”).attr(“name”);
 
var $resource = $(this).find(“a”).html().replace(“首頁”,$newavalue);
 
var $afterresource = $resource.replace($newavalue,””);
 
var $afterresource = $newavalue + $afterresource.replace(“首頁”,$newavalue);


實現(xiàn)的是關鍵詞替換,不過到第三行時候不執(zhí)行了,調試啊,替換啊,都不行。 從早上到剛才一直在各種群里面發(fā)問,終于 …… 俺們大本營 的Lomu大神一陣見血:

你的寫法不對

要連接符

$(“div.content:nth-child($content_index)”);

$(“div.content:nth-child(” + $content_index + “)”);


關鍵是外面有引號

有引號被當字符串處理了

說真的現(xiàn)在感覺,有些基礎的東西出錯,光靠自己調試根本找不出問題所在。比如剛才那個 + 號,我看書就沒見過。出現(xiàn)這種錯誤百度也不知道什么關鍵詞。真不知道  選擇器 里面用變量 還要用到+號,那個《鋒利的jQuery 》也沒有明確的說 選擇器 里面用變量 還要用到+號,包括我們的w3cschool。





  藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


文章來源:腳本之家   作者:junjie  

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

藍藍設計www.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔