Question

Im just confused with complex describe thing. I searched in google but i couldn't find any help, maybe because i don't know exactly what to search for. I'm a newbie so, How do i append some list (ordered listing in html) in div index which was clicked.

Example.

I have a different div tab:

<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>

if user click on

<button id = "button" type="button">Click Me!</button>
<button id = "button0" type="button">Click Me!</button>
<button id = "button1" type="button">Click Me!</button>
<button id = "button2" type="button">Click Me!</button>
<button id = "button3" type="button">Click Me!</button>
<button id = "button4" type="button">Click Me!</button>
<button id = "button5" type="button">Click Me!</button>

Then it should append some text to div id first2 if the button id 'button2' were clicked. How can i possibly do that? I'm newbie and it's hard for me to explain better than this.

Answer 1

您不能在页面上使用相同的id两次，因此请将按钮上的id更改为data属性，然后在click上创建data属性中的对象定位您要追加的元素，并使用$.append()

$('button').on('click',function() {
  $('#first' + $(this).data('for')).append(' more text');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>
<button id = "button" type="button" data-for="">Click Me!</button>
<button id = "button0" type="button" data-for="0">Click Me!</button>
<button id = "button1" type="button" data-for="1">Click Me!</button>
<button id = "button2" type="button" data-for="2">Click Me!</button>
<button id = "button3" type="button" data-for="3">Click Me!</button>
<button id = "button4" type="button" data-for="4">Click Me!</button>
<button id = "button5" type="button" data-for="5">Click Me!</button>

Answer 2

ID必须是唯一的。不是给按钮提供与DIV相同的ID，而是使用data属性来保存相关的DIV。然后，您可以将其转换为用于更新该DIV的选择器。

＆＃13;

$("button").click(function() {
  $("#" + $(this).data("rel")).append(" More text");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>

<button data-rel="first4">Click</button>

＆＃13;

Answer 3

你可以通过将每个按钮的id属性等同于相关的div来解决这个问题，但这非常脆弱，而不是DRY，因此维护起来很麻烦。

更好的选择是完全摆脱id属性，并通过相对容器中的索引将每个button与div相关联，如下所示：

$('.button-container button').click(function() {
  $('.content-container div').eq($(this).index()).toggle();
})

.content-container div { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-container">
  <button type="button">Toggle 0</button>
  <button type="button">Toggle 1</button>
  <button type="button">Toggle 2</button>
  <button type="button">Toggle 3</button>
  <button type="button">Toggle 4</button>
  <button type="button">Toggle 5</button>
</div>
<div class="content-container">
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

此模式具有额外的好处，即添加更多内容是在HTML中添加另一个按钮/ div组合的简单问题;你根本不需要修改JS。

Answer 4

由于之前的所有答案都是相关的，因此我尝试制作一些可以使用或不使用 id 的自定义

$(function(){ // jQuery DOM ready      
    var container = $("#container");
    container.on("click", "button", appendText);
    function appendText(e) {
      var id = $('input')[0].value
      var text = $('textarea')[0].value
      container.find('div')[id].append(text)     
      e.stopPropagation();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div id="container">
<textarea></textarea><br />
<input type="number" min="0" max="6" value="4" />
<button>Click me</button>
  <div>text0</div>
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
</div>

Jquery display text in div with different index

4 个答案: