Question

我有一个基于ruby的应用程序来管理人员及其订阅。我有一个搜索表单，允许管理员搜索具有多个指定订阅的每个人。

此表单使用<select>框选择订阅，并使用+和-符号动态添加和删除<select>框，如下所示：

Is there a way to represent relationship between a tuple and to a table in E-R diagram?

设置jQuery的方式，如果我点击任何+按钮，它将克隆第一个 <select>框和第一个 +和-按钮，然后将该克隆附加到列表的末尾。

同样，点击任意-按钮即可删除 last 项。

我想要做的是让按钮作用于同一行中的选择框。因此，如果我单击第二行的-按钮，它应该删除第二行。同样，单击第二个+按钮应在第二行后面追加一个新行。

我的jQuery：

$('.add-button').click(function(event){
    $subscriptionSelectionList = $('#subscription-select-list');
    $subscriptionSelectionBox = $('.subscription-select-box:first');

    $subscriptionSelectionBox.clone(true).appendTo($subscriptionSelectionList);

    $subscriptionSelectionRemoveButtons = $('.remove-button');

    // Show remove buttons if there is more than one element
    if ($subscriptionSelectionList.children("li").length > 1) {
        $subscriptionSelectionRemoveButtons.show();
    }
}) // End function to add extra selections

// Function to dynamicaly remove subscription search boxes
$('.remove-button').click(function(event){
    $subscriptionSelectionList = $('#subscription-select-list');
    $subscriptionSelectionBox = $('.subscription-select-box:last');

    $subscriptionSelectionBox.remove();

    $subscriptionSelectionRemoveButtons = $('.remove-button');

    // Hide remove buttons if there is only one element
    if ($subscriptionSelectionList.children("li").length == 1) {
        $subscriptionSelectionRemoveButtons.hide();
    }
}) // End function to remove extra selections

我的HTML：

<ul id="subscription-select-list">
    <li class="subscription-select-box">
        <select name="search[subscriptions][]">
            <option value="">Select a subscription</option>
            <% @products.each do |product| %>
                <optgroup label="<%= product.name %>">
                    <% product.subscriptions.each do |subscription| %>
                        <option value="<%= subscription.id %>"><%= subscription.name %></option>
                    <% end %>
                </optgroup>
            <% end %>
        </select>
        <img src="/img/add_circle.png" alt="Circular add button" class="add-button">
        <img src="/img/remove_circle.png" alt="Circular add button" class="remove-button" style="display: none;">
    </li>
</ul>

Answer 1

在这里，您将使用示例解决方案https://jsfiddle.net/u1ou0nyq/

$(document).on('click', '.add-button', function(){
  var clone = $(this).closest('li.subscription-select-box').clone();
  $('#subscription-select-list').append(clone);
  if( $('#subscription-select-list').children().length > 1) {
  	$('li.subscription-select-box').find('.remove-button').show();
  }
});

$(document).on('click', '.remove-button', function(){
  $(this).closest('li.subscription-select-box').remove();
  if( $('#subscription-select-list').children().length === 1) {
  	$('li.subscription-select-box').find('.remove-button').hide();
  }
});

div {
  display: inline;
  font-size: 20px;
}

.remove-button {
  display: none;
}

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="subscription-select-list">
  <li class="subscription-select-box">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <div class="add-button">
    +
    </div>
    <div class="remove-button">
    -
    </div>
  </li>
</ul>

由于元素是动态生成的，因此您需要委派events。

每当发生删除或添加时，每次都会检查li的号码。

请更改删除＆amp;将div添加到您的image代码。

希望这会对你有所帮助。

Answer 2

通过添加动态值管理变量来指定添加和删除图片按钮的唯一ID。

实施例。 //必须在循环中增加i。

现在点击事件你有参数i并找到＆＃34; btnAdd＆＃34; + i并在其后添加元素。

点击删除后，删除相同的元素。

Answer 3

您可以将DOM从点击的按钮遍历到最近的<li>元素，然后从那里遍历到带有.closest()的相应<ul>：

// this is the clicked "button"
var theListItem = $(this).closest("li.subscription-select-box");
var theList = theListItemForTheClickedButton.closest("ul");

关于代码段：

我已用按钮替换了您的图像，但这对脚本本身没有影响。
下面代码段中的CSS部分与答案无关，仅用于采用您的样式。
.fadeOut()部分仅表示删除了正确的列表项。

＆＃13;

$("#subscription-select-list").on("click", ".add-button", function() {
  var $subscriptionSelectionBox = $(this).closest("li.subscription-select-box"),
      $subscriptionSelectionList = $(this).closest("ul");
      // or $subscriptionSelectionList = $subscriptionSelectionBox.closest("ul");
      // or $subscriptionSelectionList = $subscriptionSelectionBox.parent();

  $subscriptionSelectionBox.clone(true).appendTo($subscriptionSelectionList);

  if ($subscriptionSelectionList.children("li").length > 1) {
    $subscriptionSelectionList.find(".remove-button").show();
  }
});

$("#subscription-select-list").on("click", ".remove-button", function() {
  var $subscriptionSelectionBox = $(this).closest("li.subscription-select-box"),
      $subscriptionSelectionList = $(this).closest("ul");

  // fadeOut is just to show that the "clicked" select is removed
  $subscriptionSelectionBox.fadeOut("slow", function() {
    $(this).remove();

    if ($subscriptionSelectionList.children("li").length <= 1) {
      $subscriptionSelectionList.find(".remove-button").hide();
    }
  });
});

＆＃13;

ul { list-style: none }
select, button { padding: 5px; border: solid 1px #a9a9a9; border-radius: 5px; }
select { width: 300px; background-color: #fff }
button { width: 30px; color: white; font-weight: bold; cursor: pointer }
button.add-button { background-color: #4ebd93; }
button.remove-button { background-color: #d12e3b }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="subscription-select-list">
  <li class="subscription-select-box">
    <select name="search[subscriptions][]">
      <option value="">Select a subscription</option>
      <optgroup label="Product 1">
        <option value="1.1">Subscription 1.1</option>
        <option value="1.2">Subscription 1.2</option>
      </optgroup>
    </select>
    <button type="button" class="add-button">+</button>
    <button type="button" class="remove-button" style="display:none">-</button>
  </li>
</ul>

＆＃13;

Answer 4

在这种情况下我会做的是这样的事情：

$('.add-button').click(function(event){
    $(this).parent().clone().appendTo($this.parent());
});

$('.remove-button').click(function(event){ 
    $(this).parent().remove();
});

.subscription-select-box:only-child .remove-button {
  display: none;
}

如果只有一个选择，请添加这个简单的css来控制删除按钮的可见性。

jQuery - 如何将按钮元素绑定到特定的select元素？

4 个答案: