Javascript 访问多个动态对象jquery_Javascript_Jquery_Html_Dom

Javascript 访问多个动态对象jquery

javascript jquery html dom

Javascript 访问多个动态对象jquery,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我认为您可以通过查看JSFIDLE来了解这一点，但以防万一。我希望用户在文本框中输入他们选择的任何数据。然后在set one中选择一个表，然后单击“提交”按钮发送该表 <div> <Div> <h1> Start </h1> Task:<input type="text" id="input_text"> </Div> <div> Send to: <select i

我认为您可以通过查看JSFIDLE来了解这一点，但以防万一。我希望用户在文本框中输入他们选择的任何数据。然后在set one中选择一个表，然后单击“提交”按钮发送该表

<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>


开始
任务：
发送至：
设置1表格1设置1表格2设置1表格3设置1表格4

这就是我遇到麻烦的地方，当我发送用户输入信息时，我也会向用户选择的任何表发送一个新的下拉选择菜单和新按钮。我不确定如何访问这些信息，因为我不知道如何给它一个“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;

}

});

$（“#提交按钮”）。单击（函数（）{
input_text=$（'#input_text'）.val（）；
选项菜单='set2table1 set2table2 set2table3 set2table4'；
索引_项=“”
发送至=$（“#发送至选项：选中”）；
log（“index:+send_to.index（））；
var send_index=send_to.index（）
开关（发送索引）{
案例0：
$（“#设置1_文本1”）。追加（“”+“”+输入文本+”+选项菜单+”+索引项+”
“+””；
打破
案例1：
$（“#设置1_文本2”）。追加（“”+“”+输入文本+”+选项菜单+“+索引项+”
”+“”）；
打破
案例2：
$（“#设置1_文本3”）。追加（“”+“”+输入文本+”+选项菜单+“+索引项+”
“+””）；
打破
案例3：
$（“#设置1_文本4”）。追加（“”+“”+输入文本+”+选项菜单+”+索引项+”
“+””；
打破
}
});

最初（部分代码仍在编写中）我只是使用了用户创建的菜单和按钮，但在我看来，这真的很难看。我也尝试过使用“.live”，但我真的不太明白它是如何工作的，我甚至不确定单独使用它是否可以解决问题

当然，其他人也遇到过类似的问题，但我并没有看到任何类似的情况。我已经在这上面呆了一段时间了，所以我真的很感谢你的帮助。如何访问发送到表集合1的每个对象的信息并将其发送到集合2的其中一个表？

尝试此操作以迭代附加到div的所有

元素：

$('#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");

不要使用

.live

，使用

$（“.container”）。在（“单击”，“输入[name=get]”上，改为使用function（）{}

$（文档）.ready（函数（）{
var input_text=$（“input_text”）.val（）；
变量选项菜单；
var-get；
var选择指数；
$（“#提交按钮”）。单击（函数（）{
input_text=$（'#input_text'）.val（）；
选项菜单='set2table1 set2table2 set2table3 set2table4'；
索引_项=“”
发送至=$（“#发送至选项：选中”）；
log（“index:+send_to.index（））；
var send_index=send_to.index（）
开关（发送索引）{
案例0：
$（“#设置1_文本1”）。追加（“”+“”+输入文本+”+选项菜单+”+索引项+”
“+””；
打破
案例1：
$（“#设置1_文本2”）。追加（“”+“”+输入文本+”+选项菜单+“+索引项+”
”+“”）；
打破
案例2：
$（“#设置1_文本3”）。追加（“”+“”+输入文本+”+选项菜单+“+索引项+”
“+””）；
打破
案例3：
$（“#设置1_文本4”）。追加（“”+“”+输入文本+”+选项菜单+”+索引项+”
“+””；
打破
}
});
$（'.container'）。在（“单击”，“输入[name=get]”上，函数（）{
get=$（this.sides（“选择”）；
selectedIndex=get.find（“选项：选中”）；
log（“索引：+selectedIndex.index（））；
var get_index=selectedIndex.index（）
警报（获取索引）；
开关（获取索引）{
案例0：
$（“set2\u text1”）。追加（“”+“”+输入文本+”
“+””）；
打破
案例1：
$（“set2_text2”）。追加（“”+“”+输入_text+”
“+””）；
打破
案例2：
$（“set2\u text3”）。追加（“”+“”+输入文本+”
“+””）；
打破
案例3：
$（“set2\u text4”）。追加（“”+“”+输入文本+”
“+””）；
打破
违约：
警报（“错误”）；
}
});
});


开始
任务：
发送至：
设置1表格1设置1表格2设置1表格3设置1表格4
Set1
设置1表格1

设置1表格2

设置1表格3

设置1表格4

Set2
set2table1

set2table2

设置2表格3

设置2表格4

在不同的点上，您的代码正在DOM中创建重复的ID。可以有重复的类，但不能有重复的ID。在这个回答中，我们使用了一个计数器

itm

，以确保没有创建重复的id（但是可以使用类名）

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

如果可以使用较新版本的jQuery，则可以使用

.on（）

而不是

.live（）

和

.bind（）

。更喜欢

input\u text

被设置为一个全局变量，以便您可以从任何函数中访问当前值。（这是通过在所有函数之外声明它来实现的）

有关

.on（）

工作原理的基本信息

jQuery:

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

<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>

var itm=0，输入文本；
$（文档）.ready（函数（）{
$（'body'）.css（{'background'：'wheat'}）；
变量选项菜单；
var-get；
var选择指数；
$（“#提交按钮”）。单击（函数（）{
itm++；
input_text=$（“#input_text”）.val（）；
发送至=$（“#se
<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");

}}); });