Jquery選擇器中使用變數實作動態選擇範例

Jquery選擇器中使用變數實作動態選擇範例_jquery

WBOY

發布： 2016-05-16 16:41:16

原創

1515 人瀏覽過

例子一：

<table>
  <tr>
    <th>用户名</th>
    <th>状态</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中選擇器參數使用變數應該注意的問題

這是原來的程式碼

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

登入後複製

實現的是關鍵字替換，不過到第三行時候不執行了，調試啊，替換啊，都不行。從早上到剛才一直在各種群裡面發問，終於 …… 俺們大本營的Lomu大神一陣見血：

你的寫法不對

要連接符

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

登入後複製

改為

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

登入後複製

關鍵是外面有引號

有引號被當字串處理了

說真的現在感覺，有些基礎的東西出錯，光靠自己調試根本找不出問題所在。例如剛才那個號，我看書就沒看過。出現這種錯誤百度也不知道什麼關鍵字。真不知道選擇器裡面用變數還要用到號，那個《鋒利的jQuery 》也沒有明確的說選擇器裡面用變數還要用到號，包括我們的w3cschool。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

Jquery選擇器中使用變數實作動態選擇範例_jquery