Question

我正在研究一个实验性网页设计师，我正试图抓住已经增加的css选择器值。我制作的小提琴生成两个按钮，并假设克隆输入[type = text]。第一个是X意思是关闭。第二个是值的文本。但是我继续从动态克隆的输入[type = text]返回[object Object]。（控制台中没有出现任何错误）

我想单击该按钮并从之前获取动态添加的值并将其显示在选择器中。（我知道我可以从按钮的文本中获取它，但因为我在我的应用程序中工作了30多个值，因为坚持使用我正在使用的东西并从密集容器中抓取它。这样一切都是分组并更易于管理）。

不确定为什么不克隆。

$(document).ready(function() {
  $(".addvalz").on('click', function() {
    // Adds value
    $(".val-nester").append("<div class='holddezvalz'><button class='deldizval'>x</button><button class='grabdezvalz'>"+ $(".inputval").val() +"</button>"+ $(".inputval").clone() +"</div>");

    // Can't add same value twice. Replace?
    var $cssselbtn = $(".val-nester > .holddezvalz button:contains(" + $(".inputval").val() + ")");
    if($cssselbtn.length > 1) {
      var x = window.confirm("Selector already exists. Want to replace it?");
      if (x) {
        $cssselbtn.first().parent().remove();
      } else {
        $cssselbtn.last().parent().remove();
        return false;
      }
    }

    // Delete a value
    $(".deldizval").on('click', function() {
      $(this).parent().remove();
    });


  });
});

Answer 1

展开@Regent's answer，只需拆分append行：

   $(".val-nester").append("<div class='holddezvalz'><button class='deldizval'>x</button><button class='grabdezvalz'>"+ $(".inputval").val() +"</button></div>");
   $(".val-nester > div.hoddezvalz").append($(".inputval").clone());

或者，更具可读性：

$(".val-nester").append($("<div class='holddezvalz'>")
     .append("<button class='deldizval'>x</button>")
     .append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>")
     .append($(".inputval").clone())
);

此外，在将其附加到DOM之前，您应该清理input.val()。将input.val()替换为

.append( ... + $("<p>").text( $(".inputval").val() ).text() + ... );

然后，在选择器中，你应该用引号括起来并在其中包含转义引号

":contains('" + $(".inputval").val().replace("'", "\\'") + "')"

Answer 2

您将$(".inputval").clone()放入字符串中，因此将其转换为字符串。

请改为尝试：

$(".val-nester").append($(".inputval").clone());

编辑：关于整个添加：

var addDiv = $("<div class='holddezvalz'><button class='deldizval'>x</button><button class='grabdezvalz'>" + $(".inputval").val() + "</button></div>");
$(addDiv).append($(".inputval").clone());
$(".val-nester").append(addDiv);

抓住动态附加值

2 个答案: