代码之家 › 专栏 › 技术社区 › Hema_Elmasry

jquery-那代码怎么了?

html jquery javascript

Hema_Elmasry · 技术社区 · 8 年前

我有一个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>

3 回复 | 直到 8 年前

Jimenemex 8 年前

你的问题是你在 optionValue 和 optionText 添加到另一个jquery对象时 appendOption 是的。移除 $() 围绕 期权价值 和 可选文本 它应该能起作用。

$(".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>

Chayim Friedman 8 年前

你想把它传给 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>

Hema_Elmasry 8 年前

解决了的

感谢所有帮助我解决这个问题的人!
当你们告诉我代码对你们很有用的时候,
我知道问题不是来自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();
});
});