访问多个动态对象 jQuery

accessing multiple dynamic objects jquery

本文关键字：对象 jQuery 动态访问更新时间：2023-09-26

我想你可以通过查看jsfiddle https://jsfiddle.net/brendanjackson/zmxrfpas/4/来解决这个问题，但以防万一。我希望用户在文本框中输入他们选择的任何数据。然后在第一组中选择一个表，然后单击"提交"按钮发送。

<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>

  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>
</div>

这就是我遇到麻烦的地方，当我发送该用户输入信息时，我还会向用户选择的任何表发送一个新的下拉选择菜单和新按钮。我不确定如何访问此信息，因为我不知道如何给它一个"ID"或就此而言，如何访问它。我需要能够访问该信息并将其发送到下一组表。

     $('#submit_button').click(function(){
       input_text = $('#input_text').val();
       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'

       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );
var send_index = send_to.index()
switch(send_index){
  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
}
});

最初（部分代码仍在小提琴中）我只是让用户创建了菜单和按钮，但这对我来说看起来真的很丑陋。我也尝试使用".live"，但我真的认为我不太了解它是如何工作的，我什至不确定单独使用它是否有可能的解决方案。

当然，其他人也遇到了类似的麻烦，但我并没有真正看到类似的东西。我已经坚持了一段时间，所以我真的很感激一些帮助。如何访问发送到表集 1 的每个对象的信息，并将其发送到集合 2 的表之一？

在不同的时间点，您的代码正在 DOM 中创建重复的 ID。您可以有重复的类，但不能有重复的 ID。在这个答案中，我们使用了计数器itm来确保没有创建重复的 ID（但可以使用类名代替）。

此外，我们还修复了第 2 节中 ID 开头缺少的#。

如果可以使用较新版本的 jQuery，则可以使用 .on() 而不是 .live() 和 .bind() 。更喜欢！

input_text被制作成一个全局变量，以便您可以从任何函数中访问当前值。（这是通过在所有函数外部声明它来完成的）。

有关.on()工作原理的基础知识，请参阅此答案。

jsFiddle 演示

j查询：

var itm=0, input_text;
$(document).ready(function() {
    $('body').css({'background':'wheat'});
  var options_menu;
  var get;
  var selectedIndex;
  $('#submit_button').click(function() {
    itm++;
    input_text = $("#input_text").val();
        send_to = $("#send_to option:selected");
    var send_index = send_to.index()
    options_menu = '<select id="options_menu-'+itm+'"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
    index_item = '<input type="button" id="get-'+itm+'" data-from="'+send_index+'" value="Get selected index" />'
        send_index++;
    $('#set1_text'+send_index).append("<ul>" + "<li>" + input_text + " " + options_menu + "" + index_item + "</li>" + "</ul>");
  });
  $(document).on("click", '[id^=get-]', function() {
      var si = $('#options_menu-'+itm+' option:selected');
  alert('bob');
      var get_index = si.index();
      var from_index = $(this).data('from');
      from_index++; //from_index is zero-based, but Tables are not
      itm++;
      get = '<input type="submit"  name="get" id="get'+itm+'" value="Get selected index" />';
      itm--;
      var final = "<ul>" + "<li>" + input_text + " (from Table " +from_index+ ")" + "</li>" + "</ul>";
    get_index++;
    $("#set2_text"+get_index).append(final);
  }); //END document.on

}); //END document.ready

.HTML：

<div>
  <div>
    <h1>Start</h1>
      Task: <input type="text" id="input_text" />
  </div>
  <div>
    Send to:
    <select id="send_to">
      <option value="set1table1">set1table1</option>
      <option value="set1table2">set1table2</option>
      <option value="set1table3">set1table3</option>
      <option value="set1table4">set1table4</option>
    </select>
  </div>
  <input type="button" id='submit_button' value="Submit!" />
</div>
<div>
  <h1>Set1</h1>
  <div id="set1table1">
    <h3>set1table1</h3>
    <ul id="set1_text1"></ul>
  </div>
  <div id="set1table2">
    <h3>set1table2</h3>
    <ul id="set1_text2"></ul>
  </div>
  <div id="set1table3">
    <h3>set1table3</h3>
    <ul id="set1_text3"></ul>
  </div>
  <div id="set1table4">
    <h3>set1table4</h3>
    <ul id="set1_text4"></ul>
  </div>
</div>
<div>
  <h1>Set2</h1>
  <div id="set2table1">
    <h3>set2table1</h3>
    <ul id="set2_text1"></ul>
  </div>
  <div id="set2table2">
    <h3>set2table2</h3>
    <ul id="set2_text2"></ul>
  </div>
  <div id="set2table3">
    <h3>set2table3</h3>
    <ul id="set2_text3"></ul>
  </div>
  <div id="set2table4">
    <h3>set2table4</h3>
    <ul id="set2_text4"></ul>
  </div>
</div>

$(document).ready(function() {
var input_text = $("input_text").val();
var options_menu ;
var get;
var selectedIndex ;
$('#submit_button').click(function(){
input_text = $('#input_text').val();
options_menu = '<select  class="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
index_item = '<input type="submit" name="get" class="get" value="Get selected index" />'

send_to = $("#send_to option:selected");
console.log("index: " + send_to.index() );
var send_index = send_to.index()
switch(send_index){
case 0:
$('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;
case 1:
$('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;
case 2:
$('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;
case 3:
$('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
break;
}
});
$('.get').live("click", function() {
get = '<input type="submit"  name="get" class="get" value="Get selected index" />';
selectedIndex = $(this).closest('li').find('select.options_menu option:selected');
console.log("index: " + selectedIndex.index() );
var get_index = $(this).closest('li').find('select.options_menu option:selected').index();
alert(get_index)
switch(get_index) {
case 0:
$( "#set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;
case 1:
$( "#set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;
case 2:
$( "#set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
break;
case 3:
$( "#set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
break;
default:
alert("Error");
}}); });

尝试这样做来遍历附加到div的所有<ul>元素：

$('#set1_text1 > ul').each(function(index, element) {
   console.log(index + ": ", element);
   //Access whatever data attributes of the element you need
   console.log($(this).find('#options_menu option:selected'));
});

替换

get = '<input type="submit"  name="get" id="get" value="Get selected index" />';
selectedIndex = $("#get option:selected");

跟

selectedIndex = $(this).siblings("select").index();

并且不要使用.live，而是使用$(".container").on("click", "input[name=get]", function(){})。

$(document).ready(function() {
	  var input_text = $("input_text").val();
    var options_menu ;
    var get;
    var selectedIndex ;
    
     $('#submit_button').click(function(){
       input_text = $('#input_text').val();
       
       options_menu = '<select  id="options_menu"> <option value="set2table1">set2table1</option> <option value="set2table2">set2table2</option> <option value="set2table3">set2table3</option> <option value="set2table4">set2table4</option> </select>';
       index_item = '<input type="submit" name="get" id="get" value="Get selected index" />'
     
      
       send_to = $("#send_to option:selected");
       console.log("index: " + send_to.index() );
    
var send_index = send_to.index()
  
switch(send_index){
  case 0:
    $('#set1_text1').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 1:
  $('#set1_text2').append("<ul>" + "<li>" +input_text+  "  " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 2:
  $('#set1_text3').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
  
  case 3:
  $('#set1_text4').append("<ul>" + "<li>" +input_text+ " " +options_menu+ "" +index_item+ "</li>" + "</ul>");
  break;
}
});
  $('.container').on("click", "input[name=get]", function() {
 get = $(this).siblings("select");
 selectedIndex = get.find("option:selected");
  console.log("index: " + selectedIndex.index() );
 
 var get_index = selectedIndex.index()
 alert(get_index);
switch(get_index) {
case 0:
  $( "set2_text1" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;
  case 1:
  $( "set2_text2" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;
  case 2:
  $( "set2_text3" ).append("<ul>" + "<li>" +input_text+ "</li>" + "</ul>");
  break;
  case 3:
  $( "set2_text4" ).append("<ul>" + "<li>" +input_text + "</li>" + "</ul>");
  break;
  default:
  alert("Error");
}
  });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <Div> <h1>
  Start
  </h1>
    Task:<input type="text" id="input_text">
  </Div>
  <div>
  Send to:
  <select id="send_to"> <option value="set1table1">set1table1</option>     <option value="set1table2">set1table2</option> <option value="set1table3">set1table3</option> <option value="set1table4">set1table4
                  </option> </select>
  </div>
  <input type ="button" id = 'submit_button'value="Submit!"/>
</div>
<div class="container">
<div>
  <h1>
  Set1
  </h1>
  
  <div id="set1table1">
          <h3>set1table1</h3>
          <ul id="set1_text1"></ul> 
  </div>
  <div id="set1table2">
          <h3>set1table2</h3>
          <ul id="set1_text2"></ul> 
  </div>
  <div id="set1table3">
          <h3>set1table3</h3>
          <ul id="set1_text3"></ul> 
  </div>
  <div id="set1table4">
          <h3>set1table4</h3>
          <ul id="set1_text4"></ul> 
  </div>
</div>
<div> <h1>Set2</h1>
 <div id="set2table1">
          <h3>set2table1</h3>
          <ul id="set2_text1"></ul> 
  </div>
  <div id="set2table2">
          <h3>set2table2</h3>
          <ul id="set2_text2"></ul> 
  </div>
  <div id="set2table3">
          <h3>set2table3</h3>
          <ul id="set2_text3"></ul> 
  </div>
  <div id="set2table4">
          <h3>set2table4</h3>
          <ul id="set2_text4"></ul> 
  </div>
</div>
</div>