已解决

Question

我已经打开了onclick jQuery代码，即使出现错误也没有任何响应！

我不知道为什么，但是这是我的 jQuery代码：

/* This Is working correctly */
$(".add-blog .blog-add-form .add-article .input-group select").on("change", function() {
  var tagsUl = '<li class="' + $(this).val() + '"><i class="fa fa-fw fa-times" aria-hidden="true"></i> ' + $(".add-blog .blog-add-form .add-article .input-group select option:selected").text() + '</li>';
  $(".add-blog .blog-add-form .add-article .input-group ul").append($(tagsUl));
  $(".add-blog .blog-add-form .add-article .input-group select option:selected").remove();
});

/* This isn't working correctly */
$(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() {
  var optionValue = $(this).parent().attr("class"),
    optionText = $(this).parent().text(),
    appendedOption = "<option value='" + $(optionValue) + "'>" + $(optionText) + "</option>";
  $(this).parent().parent().parent().children("select").append($(appendedOption));
  $(this).parent().remove();
});

我100％确定此元素选择器存在
当我打开css元素检查器时，选择该元素并放入相同的元素选择器，这表明该元素是选定的元素。

无论如何，这是我的 HTML代码：

<article class='add-blog'>
  <div class='blog-add-form'>
    <div class='add-article'>
      <form method='POST' action='example.php' class='form-horizontal'>
        <div class='input-group'>
          <select></select>
          <ul class='list-unstyled selected-ul'>
            <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</article>

Answer 1

您的问题是，当您将optionValue和optionText添加到appendOption时，它们将它们转换为另一个jQuery对象。删除$()和optionValue周围的optionText，它应该可以工作。

$(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() {
  var optionValue = $(this).parent().attr("class");
  var optionText = $(this).parent().text();
  var appendedOption = "<option value='" + optionValue + "'>" + optionText + "</option>";
  $(this).parent().parent().parent().children("select").append($(appendedOption));
  $(this).parent().remove();
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<article class='add-blog'>
  <div class='blog-add-form'>
    <div class='add-article'>
      <form method='POST' action='example.php' class='form-horizontal'>
        <div class='input-group'>
          <select></select>
          <ul class='list-unstyled selected-ul'>
            <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</article>

Answer 2

您正试图将一个字符串传递给jQuery函数（$），并将其作为选择器进行拦截：

appendedOption  = "<option value='" + $(optionValue) + "'>" + $(optionText) + "</option>";

相反，请执行以下操作：

appendedOption  = "<option value='" + optionValue + "'>" + optionText + "</option>";

$(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() {
    var optionValue     = $(this).parent().attr("class"),
        optionText      = $(this).parent().text(),
        appendedOption  = "<option value='" + optionValue + "'>" + optionText + "</option>";
    $(this).parent().parent().parent().children("select").append(appendedOption);
    $(this).parent().remove();
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article class='add-blog'>
  <div class='blog-add-form'>
    <div class='add-article'>
      <form method='POST' action='example.php' class='form-horizontal'>
        <div class='input-group'>
          <select></select>
          <ul class='list-unstyled selected-ul'>
            <li class='0'><i class='fa fa-fw fa-times'></i> Anytext</li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</article>

Answer 3

已解决

感谢所有帮助我解决这个问题的人！
你们告诉我代码可以正常使用时，
我知道问题不在于onclick jQuery函数。
我的新代码：

$(".add-blog .blog-add-form .add-article .input-group select").on("change", function() {
  var tagsUl = '<li class="' + $(this).val() + '"><i class="fa fa-fw fa-times" aria-hidden="true"></i> ' + $(".add-blog .blog-add-form .add-article .input-group select option:selected").text() + '</li>';
  $(".add-blog .blog-add-form .add-article .input-group ul").append($(tagsUl));
  $(".add-blog .blog-add-form .add-article .input-group select option:selected").remove();
$(".add-blog .blog-add-form .add-article .input-group ul li i").on("click", function() {
  var optionValue = $(this).parent().attr("class"),
    optionText = $(this).parent().text(),
    appendedOption = "<option value='" + optionValue + "'>" + optionText + "</option>";
  $("select").append(appendedOption);
  $(this).parent().remove();
});
});

jQuery-该代码有什么问题？

3 个答案:

已解决