Question

我创造了一个小型发电机来提高我的技能发展能力，但是我没有遇到什么问题。如何使用jquery从隐藏输入中获取变量sectionid？我试试这种方式，但这不起作用。我得到一个未定义的值。

var sectionid = $(this).find(".sectioncolor").next().val();
alert(sectionid);

$("#add_section").on("click", function() {

  var sectionid = $(".section").length;
  var sectionwidth = prompt("Section width");
  var sectionheight = prompt("Section height");
  var bg = prompt("BG color");
  var sectioncolor = prompt("Text color");
  $("#new_section").append('<div class="section" style="width: ' + sectionwidth + 'px; min-height: ' + sectionheight + 'px; background: #' + bg + '; color: #' + sectioncolor + ';"><button type="button" class="add_text">Add text</button><input type="hidden" name="section[' + sectionid + '][\'sectionwidth\']" value="' + sectionwidth + '" /> <input type="hidden" name="section[' + sectionid + '][\'sectionheight\']" value="' + sectionheight + '" /> <input type="hidden" name="section[' + sectionid + '][\'bg\']" value="' + bg + '" /> <input type="hidden" name="section[' + sectionid + '][\'sectioncolor\']" class="sectioncolor" value="' + sectioncolor + '" /> <input type="hidden" class="sectionid" name="sectionid" value="' + sectionid + '" /></div>');

  if ($(".sekcja").length > 0) {
    $("#default-section").css("display", "none");
  }

  if (sectionwidth < 1050) {
    $(".section").css("float", "left");
  }

});

$("#new_section").on("click", ".add_text", function() {

  var sectionid = $(this).find(".sectioncolor").next().val();
  alert(sectionid);
  var inputid = $('.sample').length;
  var inputwidth = prompt("Input width");
  $(this).parent().append('<input type="text" class="sample" style="width: ' + inputwidth + 'px;" placeholder="Sample text..." name="section[' + sectionid + '][\'input\'][' + inputid + '][\'inputtext\']"/><input type="hidden" name="section[' + sectionid + '][\'input\'][' + inputid + '][\'inputwidth\']" value="' + inputwidth + '" />');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
  <div id="default-section">Default section</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

Answer 1

sectioncolor位于div内，而不在.add_text内，因此您需要更改：

var sectionid = $(this).find(".sectioncolor").next().val();

到

var sectionid = $(this).parent().find(".sectioncolor").next().val();

Answer 2

为什么复杂化？您只能使用siblings()，因为您知道要查找的元素的类

var sectionid = $(this).siblings(".sectionid").val();

find()在元素内搜索，但sectionid是add_text的兄弟，这就是为什么你应该使用兄弟姐妹。它是通往所需元素的最直接途径

＆＃13;

$("#add_section").on("click", function() {

  var sectionid = $(".section").length;
  var sectionwidth = prompt("Section width");
  var sectionheight = prompt("Section height");
  var bg = prompt("BG color");
  var sectioncolor = prompt("Text color");
  $("#new_section").append('<div class="section" style="width: ' + sectionwidth + 'px; min-height: ' + sectionheight + 'px; background: #' + bg + '; color: #' + sectioncolor + ';"><button type="button" class="add_text">Add text</button><input type="hidden" name="section[' + sectionid + '][\'sectionwidth\']" value="' + sectionwidth + '" /> <input type="hidden" name="section[' + sectionid + '][\'sectionheight\']" value="' + sectionheight + '" /> <input type="hidden" name="section[' + sectionid + '][\'bg\']" value="' + bg + '" /> <input type="hidden" name="section[' + sectionid + '][\'sectioncolor\']" class="sectioncolor" value="' + sectioncolor + '" /> <input type="hidden" class="sectionid" name="sectionid" value="' + sectionid + '" /></div>');

  if ($(".sekcja").length > 0) {
    $("#default-section").css("display", "none");
  }

  if (sectionwidth < 1050) {
    $(".section").css("float", "left");
  }

});

$("#new_section").on("click", ".add_text", function() {

  var sectionid = $(this).siblings(".sectionid").val();
  alert(sectionid);
  var inputid = $('.sample').length;
  var inputwidth = prompt("Input width");
  $(this).parent().append('<input type="text" class="sample" style="width: ' + inputwidth + 'px;" placeholder="Sample text..." name="section[' + sectionid + '][\'input\'][' + inputid + '][\'inputtext\']"/><input type="hidden" name="section[' + sectionid + '][\'input\'][' + inputid + '][\'inputwidth\']" value="' + inputwidth + '" />');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
  <div id="default-section">Default section</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

＆＃13;

选项2。如果您真的想使用sectioncolor，还可以使用siblings

var sectionid = $(this).siblings(".sectioncolor").next().val();

Answer 3

 $("#add_section").on("click", function() {

            var sectionid = $(".section").length;
            alert(sectionid);
            var sectionwidth = prompt("Section width");
            var sectionheight = prompt("Section height");
            var bg = prompt("BG color");
            var sectioncolor = prompt("Text color");
            $("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button><input type="hidden" class="sectionid" name="sectionid" value="'+ sectionid +'" /><input type="hidden" name="section['+sectionid+'][\'sectionwidth\']" value="'+sectionwidth+'" /> <input type="hidden" name="section['+sectionid+'][\'sectionheight\']" value="'+sectionheight+'" /> <input type="hidden" name="section['+sectionid+'][\'bg\']" value="'+bg+'" /> <input type="hidden" name="section['+sectionid+'][\'sectioncolor\']" class="sectioncolor" value="'+sectioncolor+'" /> </div>');

            if ($(".sekcja").length > 0) {
                $("#default-section").css("display","none");    
            }

            if(sectionwidth < 1050) {
                $(".section").css("float","left");  
            }

        });

        $("#new_section").on("click", ".add_text", function() {

                var sectionid = $(this).next().val();
                alert(sectionid);
                var inputid = $('.sample').length;
                var inputwidth = prompt("Input width");
                $(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="section['+sectionid+'][\'input\']['+inputid+'][\'inputtext\']"/><input type="hidden" name="section['+sectionid+'][\'input\']['+inputid+'][\'inputwidth\']" value="'+inputwidth+'" />');

        });
        });

Answer 4

$("#add_section").on("click", function() {
			
			var sectionid = $(".section").length;
			var sectionwidth = prompt("Section width");
			var sectionheight = prompt("Section height");
			var bg = prompt("BG color");
			var sectioncolor = prompt("Text color");
			$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button><input type="hidden" name="section['+sectionid+'][\'sectionwidth\']" value="'+sectionwidth+'" /> <input type="hidden" name="section['+sectionid+'][\'sectionheight\']" value="'+sectionheight+'" /> <input type="hidden" name="section['+sectionid+'][\'bg\']" value="'+bg+'" /> <input type="hidden" name="section['+sectionid+'][\'sectioncolor\']" class="sectioncolor" value="'+sectioncolor+'" /> <input type="hidden" class="sectionid" name="sectionid" value="'+ sectionid +'" /></div>');
			
			if ($(".sekcja").length > 0) {
				$("#default-section").css("display","none");	
			}

			if(sectionwidth < 1050) {
				$(".section").css("float","left");	
			}

		});
		
		$("#new_section").on("click", ".add_text", function() {
				
				var sectionid = $(this).parent(".section").find(".sectioncolor").val();
				alert(JSON.stringify(sectionid));
				var inputid = $('.sample').length;
				var inputwidth = prompt("Input width");
				$(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="section['+sectionid+'][\'input\']['+inputid+'][\'inputtext\']"/><input type="hidden" name="section['+sectionid+'][\'input\']['+inputid+'][\'inputwidth\']" value="'+inputwidth+'" />');
				
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
<div id="default-section">Default section</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

我怎样才能获得sectionid

4 个答案: