進行動態選擇的jQuery

Question

我有jQuery的腳本（2.1.4）誰一個按鈕添加到特定塊
例子：

<div class="dr_ing_list"> 
    <?php 
     $ingredients=explode(';', $donnee['ingredients']); 
     foreach ($ingredients as $value) { 
      echo "<p>".$value."</p></br>"; 
     } 
    ?> 
</div> 
<div class="dr_met_list"> 
    <?php 
     $methode=explode(';', $donnee['methode']); 
     foreach ($methode as $value) { 
      echo "<p>".$value."</p></br>"; 
     } 
    ?> 
</div> 

我得到的每類股利爲做一個動態選擇，但我有一個錯誤：
未捕獲的錯誤：語法錯誤，無法識別的表情： 「.dr_ing_list p：上」

這裏是我的jQuery腳本：

var block_button = 0; 
 
$(".fa-lg").click(function(e){ 
 
    e.preventDefault; 
 
    var categorie = $(this).parent().attr('class'); 
 
    var selector = categorie+' p:last'; 
 
    selector = '".'+selector+'"'; 
 
    alert(selector); 
 
    $(selector).after("<button class='cta' type='button'>Valider les modifications</button>"); 
 
});

p{ 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom:10px; 
 
} 
 

 
.dr_met_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

我的錯誤在哪裏？由於

Answer 1

你的錯誤是在這一行：

selector = '".'+selector+'"'; 

更改它到：

selector = '.'+selector; 

爲什麼？在第一種情況下的選擇器是一個包含字符串：dr_ing_list P 「 」：最後一個「」代替它必須是：「.dr_ing_list p：上」（雙引號）。

的片段：

var block_button = 0; 
 
$(".fa-lg").click(function(e){ 
 
    e.preventDefault; 
 
    var categorie = $(this).parent().attr('class'); 
 
    var selector = categorie+' p:last'; 
 
    selector = '.'+selector; 
 
    console.log(selector); 
 
    $(selector).after("<button class='cta' type='button'>Valider les modifications</button>"); 
 
});

p{ 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom:10px; 
 
} 
 

 
.dr_met_list{ 
 
    width:300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

減小的代碼的形式可以是：

• nextAll：獲取每個元素的所有後面的兄弟姐妹中匹配的元素集合的，可以通過選擇器進行過濾。
• ：這樣你可以避免寫HTML作爲字符串，避免這樣的潛在錯誤

因此，新的片段是：

var block_button = 0; 
 
$(".fa-lg").click(function (e) { 
 
    e.preventDefault; 
 
    $(this).nextAll('p:last').after($('<button/>', { 
 
    class: 'cta', 
 
    type: 'button', 
 
    text: 'Valider les modifications' 
 
    })); 
 
});

p { 
 
    margin: 0; 
 
} 
 

 
.dr_ing_list { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.dr_met_list { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="dr_ing_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Butter</P></br> 
 
    <p>Milk</P></br> 
 
    <p>Egg</P></br> 
 
    <p>Flour</P></br> 
 
</div> 
 

 
<div class="dr_met_list"> 
 
    <button type="button" class="fa-lg">edit</button> 
 
    <p>Shake</P></br> 
 
    <p>Don't drink</P></br> 
 
    <p>Re shake</P></br> 
 
    <p>You can drink</P></br> 
 
</div>

Answer 2

你結束了太多的引號

嘗試改變

selector = '".'+selector+'"'; 

要

selector = '.'+ selector;