Question

我的引导列表对每个项目都有一个＆＃34;添加＆＃34;按钮。点击添加后，我修改项目并将其添加到另一个列表组。

但如果我修改按钮元素没有任何反应。我不知道为什么，我尝试了很多方法，但没有任何作用。

这是默认项目：

<div class="list-group-item" data-id="399">
   <div class="input-group input-group-sm">
      <span class="input-group-addon" style="width:100%">Item-Name</span>
      <div class="input-group-btn">
         <button type="button" class="btn btn-success item-add">+</button>
      </div>
   </div>
</div>

这就是我想要的：

<div class="list-group-item" data-id="399">
   <div class="input-group input-group-sm">
      <span class="input-group-addon" style="width:100%">Item-Name</span>      
      <input class="form-control" placeholder=" Suchbegriffe" value="" style="min-width:150px;" type="text">
      <div class="input-group-btn">
         <button type="button" class="btn btn-success item-remove">x</button>
      </div>
   </div>
</div>

＆＃34; .item-add＆＃34; jQ功能：

var elem = $(this).parent().parent();

$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger');    
$(elem).children(':eq(0)').after('<input type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">');
$(elem).children(':eq(0)').html($(elem).children(':eq(0)').html().substr(0, 15) + '...');

elem = $(elem).parent();

$('#item-list-search').append(elem);

如果我使用console.log($(elem).children(':eq(last)'));，则会显示<button>元素，但不会有任何更改。

Answer 1

应该更像这样：

$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger');

而不是：

$(elem).children(':eq(last)').removeClass('btn-success').addClass('btn-danger');

因为你必须将它连接起来，使它看起来像一个字符串。从上次是javasccript。所以现在按钮实际上会改变。

Answer 2

我为你做了一个JsFiddle，请看这里https://jsfiddle.net/tnya6b1e/

用这个js：

$('.item-add').click(function() {
    if (!($('#newitem').length > 0)) {
        $('.item-add').parents('.input-group-btn').prepend('<input id="newitem" type="text" class="form-control" placeholder=" Suchbegriffe" value="' + $('#parameters').val() + '" style="min-width:150px;">');
        $(this).removeClass('btn-success').addClass('btn-danger'); 
    }

});

Answer 3

$(elem).children(':eq('+last+')').removeClass('btn-success').addClass('btn-danger');

last是JavaScript变量。因此，它应该与字符串

连接

jQuery修改元素子元素

3 个答案: