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>

我得到每个div的类来制作一个动态选择器，但我有一个错误：
未捕获错误：语法错误，无法识别的表达式：＆＃34; .dr_ing_list p：last＆＃34;

这是我的jQuery脚本：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的错误在哪里？感谢

Answer 1

你的报价太多了

尝试更改

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

到

selector = '.'+ selector;

Answer 2

您的错误就在这一行：

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

将其更改为：

selector = '.'+selector;

为什么呢？第一种情况下的选择器是一个字符串，包含： “。”dr_ing_list p：最后“” 而必须是： “。dr_ing_list p：last” （双引号）。

摘录：

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：获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。
jQuery Create element on the fly：以这种方式避免将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>

制作动态选择器jQuery

2 个答案: