Question

我有一个div，其中包含带有ID的按钮。单击该按钮时，它将调用一些jQuery函数。

我不确定如何添加第二个div，其中也包含一个按钮，并允许其中一个使用jQuery函数。

我的HTML：

<div id="box" style="background:rgb(163, 205, 224); color:black; padding:15px;">
  <div id="container">
    <div id="header" style=" border-radius: 5px;">
      <h2>
        IT helpdesk
      </h2>
    </div>
    <div id="content">
      <ul id="favorite-links" style="list-style-type: none; padding:0;">
        <div id="text"></div>
        <li>
          <a href="http://artslab.info">Artslab</a><button class="removebtn">x</button>
        </li>
      </ul>
      <div id="new-link-button">
        <button>Add New Link</button>
      </div>
    </div>
    <div id="add-link-form">
      <label>Title</label><br /><input id="title" placeholder="Title here" /><br /><label>URL</label><br /><input id="url" value="http://" /><br /><button id="add">Save Link</button>
    </div>
  </div>
</div>

我的JavaScript

$(document).ready(function() {
  var $ul = $('#favorite-links');
  var $title = $('#title');
  var $url = $('#url');
  var $text = $('#text');

  //get items from local storage
  if (localStorage.getItem('vk-links')) {
    $ul.html(localStorage.getItem('vk-links'));
  }

  // add new item
  $('#add').click(function() {

    //add new item
    $('#favorite-links').append('<li><a href="' + $url.val() + '">' + $title.val() + '</a><button class="removebtn">x</button></li>');

    //save changes to local storage
    localStorage.setItem('vk-links', $ul.html());

    //reset form
    $title.val("");
    $url.val("http://");
    $("#add-link-form").slideToggle("100");

  });

  //remove item
  $("#favorite-links").on('click', '.removebtn', function() {
    $(this).parent().remove();
    //save changes to local storage
    localStorage.setItem('vk-links', $ul.html());
  });

  //form toggle
  $("#new-link-button").click(function() {
    $("#add-link-form").slideToggle("100");
  });


  // reuse the same code for other div element such as the box 
  $("button").each(function(index) {
    //document
  });

});

我在这里做了一个jsFiddle，非常感谢您的帮助：

https://jsfiddle.net/shezellfoster/9xecvqd4/

Answer 1

由于您的代码很大，因此我简化了该概念的示例。

首先，您将使用类选择器而不是id选择器，以便您可以查询多个元素。 ID必须是唯一的（因此请在您的html（如果您复制div）。
现在，我们可以使用类选择器将click元素分配给所有按钮。
在处理函数中，我们使用this变量来获取当前按下的按钮。
我们查看此按钮位于哪个容器中，并在其中找到p元素在这里更改文本。

$('.change').on('click', function(){
  $(this).closest('.container').find('p').text('text changed');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container1" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

<div id="container2" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

<div id="container3" class="container">
  <p>Change this text</p>
  <button class="change">Change</button>
</div>

如果要动态添加多个容器，则需要使用事件委托。（或使用clone(true)，但现在就算了吧

$('#dynamic_content').on('click', '.container', function() {
  $(this).closest('.container').find('p').text('text changed');
});

$('#clone').on('click', function() {
  $('#dynamic_content').children('.container').first().clone().appendTo('#dynamic_content');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic_content">
  <div class="container">
    <p>Change this text</p>
    <button class="change">Change</button>
  </div>
</div>
<br />
<button id="clone">clone</button>

对多个div使用jQuery函数

1 个答案: