时间戳

首页 > 解决方案 > 对多个 div 使用 jQuery 函数

jquery - 对多个 div 使用 jQuery 函数

问题描述

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

标签： jqueryfunction

解决方案

由于您的代码很大，我制作了一个更易于阅读的概念示例。

  • 首先，您将使用类选择器而不是 id 选择器，这样您就可以查询多个元素。Id 需要是唯一的（如果您复制 div，请在您的 html 中更改它）。
  • 现在我们可以使用类选择器为所有按钮分配一个点击元素。
  • 在处理函数内部，我们使用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>

推荐阅读