Question

我正在动态创建多个元素，我想访问特定的元素。我编写这段代码是为了尽可能简单地了解我的问题。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $(document).on('click', '#addedButton' + (b) + '', function() {
    $('#addedDiv' + (b) + '').fadeToggle("fast");
    b++;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

如果我创建ID为addedButton1,2,3 etc.的多个按钮，然后单击特定的按钮，我想.show()用文本适合<div>。我该如何实现？

Answer 1

如果需要获取按钮的ID，可以将其添加到data属性，然后在.addedButton单击功能中获取该值。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function(){
    $('#divArea').append('<button class="generatedButton" id="addedButton'+(a)+'" data-button-id="'+(a)+'"type="button">button'+(a)+'</button>')
    $('#valuesArea').append('<div id="addedDiv'+(a)+'">button '+(a)+' clicked </div>' )
    $('#addedDiv'+(a)+'').fadeToggle("slow");
    a++;
  });
  //this way i can get acces to only first element
  $(document).on('click','.generatedButton',function(){
    b = $(this).data('button-id');
    $('#addedDiv'+(b)+'').fadeToggle("fast");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>
</html>

Answer 2

错误是您仅将一次点击事件绑定到#addedButton0。

请参阅重构代码。我将data属性附加到单击事件$('#addedDiv' + $(this).data('a')).fadeToggle("fast");中使用的按钮上。这样，就不再需要变量b。

$(document).ready(function() {
  var a = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + a + '" data-a="' + a + '" type="button">button' + a + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + a + '">button ' + a + ' clicked </div>')
    $('#addedDiv' + a).fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $('#divArea').on('click', 'button', function() {
    $('#addedDiv' + $(this).data('a')).fadeToggle("fast");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 3

在data-target中使用<button>属性，该属性包含目标内容id。因此，您可以通过使用唯一的id定位特定内容来轻松切换数据。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button id="addedButton' + (a) + '"type="button" data-target="addedDiv'+(a)+'">button' + (a) + '</button>')
    $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
  //this way i can get acces to only first element
  $(document).on('click', "button[data-target]", function() {
    var targetData = $(this).attr('data-target');
    $('#'+targetData).fadeToggle("fast");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 4

$(document).ready(function() {
      var a = 0;
      var b = 0;
      $('#generate').click(function() {
        $('#divArea').append('<button onclick="check('+(a)+')" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
        $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
        $('#addedDiv' + (a) + '').fadeToggle("slow");
        a++;
      })
      //this way i can get acces to only first element
      //$(document).on('click', '#addedButton' + (b) + '', //function() {
        //$('#addedDiv' + (b) + '').fadeToggle("fast");
        
        //b++;
      //})
        
    });
    function check(id){
          $('#addedDiv'+ (id)).show();
     }

<!-- begin snippet: js hide: false console: true babel: null -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea">
</div>

<button id="generate">
    Generate
</button>
<div id="valuesArea">
</div>

Answer 5

为元素分配一个类，然后使用$（this）获取特定的ID并根据需要对其进行访问。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generate').click(function() {
    $('#divArea').append('<button class="btn_class" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
    $('#valuesArea').append('<div class="div_class" id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
    $('#addedDiv' + (a) + '').fadeToggle("slow");
    a++;
  })
});
$(document).on('click', '.btn_class', function() {
  id = $(this).attr('id'); // To get the ID of the element
  $('this').fadeToggle("fast");
});

由于这是一个$（document）查询，因此您无需将其置于ready函数下。而且我认为如果只想切换它，则无需为该元素提供id。希望这会有所帮助！

如何访问特定的动态创建的元素？

5 个答案: