带有 javascript/jquery 的 DOM答案

【问题标题】：DOM with javascript/jquery带有 javascript/jquery 的 DOM
【发布时间】：2015-04-10 05:14:53
【问题描述】：

我是 javascript/jquery 的新手。我试图从 div 中检索一些值，但没有成功。这就是我在执行代码时得到的。

Uncaught ReferenceError: getQuestionOptionValues is not defined.

我的代码：

<div class="section row" id="divQ1113">
    <div class="section row principal_question">
        <label>Escoja una opción</label>    
    </div>
    <div class="section row sub_question"></div>
    <div class="section row">
        <select name="Q1113" id="Q1113">
            <option value="">Opciones</option>
            <option value="Q1113_QO3514">SI</option>
            <option value="Q1113_QO3515">NO</option>
        </select>    
    </div>
</div>

这是一个下拉列表，我只想检索选定的值，但只是值的一部分。在本例中为 3514 或 3515。

我正在尝试这个：

var ret = getQuestionOptionValues("div#divQ<?php echo $cond->question_id_dep;   ?>");

这样的结果是：

var ret = getQuestionOptionValues("div#divQ1113");

然后函数执行下一步：

function getQuestionOptionValues(element) {
    var ret = new Array();
    x$(element).find("input").filter(function() {
        return this.selected;
    }).each(function(optelement, index, xui) {
        ret.push(parseInt(x$(optelement).attr("value").toString().replace(/Q\d+_QO/g, "")));
    });
    return ret;
}

我做错了什么？

我必须对另一种带有复选框的 div 做同样的事情。像这样：

<div class="section row" id="divQ2" style="display: none;">
    <div class="section row principal_question">
        <label>Por favor indique el motivo o motivos de su insatisfacción:</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO1" id="Q2_QO1" />Limpieza habitación</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO2" id="Q2_QO2" />Atención del personal</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO3" id="Q2_QO3" />Restaurante, alimentación, calidad o falta de servicio</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO4" id="Q2_QO4" />Estado de las instalaciones</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO5" id="Q2_QO5" />Otros motivos, especificar</label>
    </div>
</div>

在这种情况下，我只需要检索选中的复选框，特别是名称或 ID 标签上的最后一个数字。 IE。对于 Q2_QO5，我需要得到 5，但前提是选中复选框。

【问题讨论】：

欢迎来到 StackOverflow。如果您花时间将代码格式化为可读状态，您会发现您将获得更快更好的答案。我在这里为你编辑了你的代码。
看起来像getQuestionOptionValues 范围的问题...是否在另一个函数中定义了getQuestionOptionValues...
那么 x$ 是什么？ jQuery的某种冲突版本？
确保在调用getQuestionOptionValues之前定义它
嗨，Gal，我在哪里以及如何定义 getQuestionOptionValues？

标签： javascript jquery

【解决方案1】：

注意：浏览器以这种方式读取您的代码：从左到右，从上到下。因此，如果您没有定义 getQuestionOptionValues 这将显示 undefined 错误。如果此函数在另一个脚本文件中，请确保在所有其他脚本之前调用它，以避免此错误。 :)

【讨论】：

【解决方案2】：

在您的代码中，我对 x$() 有一些疑问，您使用的名称为 x$() 的函数是否可以从代码中理解，以及如何调用 getQuestionOptionValues() 方法也会造成混淆。由于这些混淆，我将您的代码重写为此。首先，您完全尝试此操作，然后尝试更改您的代码。请运行最后给出的代码 sn -p。我想这会对你有所帮助。

第 1 部分脚本

 <script>
        /*
           instead of this you can use your code. that is
           var id='<?php echo $cond->question_id_dep;?>';
        */
        var id='1113'; 

        $("div#divQ"+id+" select").change(function(){
           var ret = getQuestionOptionValues("div#divQ"+id);
           alert('Selected option value is ' + ret);
        });

        var ret = getQuestionOptionValues("div#divQ"+id);
        alert('Selected option value is ' + ret);

        function getQuestionOptionValues(element) {
            return $(element+" select").val().split("_")[1].replace("QO","");
        }

        $("#divQ2 .checkbox input").click(function(){
            var ret = getCheckedCheckboxes();
            alert('checked checkboxes ' + ret);
        });

        function getCheckedCheckboxes(){
            var ar = Array();
            $("#divQ2 .checkbox input:checked").each(function(){
                ar.push($(this).attr('id').split("_")[1].replace("QO",""));
            });
            return ar;
        }

        alert('checked checkboxes ' + getCheckedCheckboxes());

</script>

第二部分脚本

<script>
       $("#divQ2 .checkbox input").click(function(){
            var ret = getCheckedCheckboxes();
            alert('checked checkboxes ' + ret);
        });

        function getCheckedCheckboxes(){
            var ar = Array();
            $("#divQ2 .checkbox input:checked").each(function(){
                ar.push($(this).attr('id').split("_")[1].replace("QO",""));
            });
            return ar;
        }

        alert('checked checkboxes ' + getCheckedCheckboxes());

 </script>

下面的代码sn-p

<script src="//code.jquery.com/jquery-1.10.2.js"></script>


In your code i have some doubts about x$() you are using 
so i have rewrite your code something like this. can you please try 
this.

		<div class="section row" id="divQ1113">
			<div class="section row principal_question">
				<label>Escoja una opción</label>    
			</div>
			<div class="section row sub_question"></div>
			<div class="section row">
				<select name="Q1113" id="Q1113">
					<option value="123">Opciones</option>
					<option selected value="Q1113_QO3514">SI</option>
					<option value="Q1113_QO3515">NO</option>
				</select>    
			</div>
		</div>

For second part of your question you can use like this
		
	<div class="section row" id="divQ2" style="">
    <div class="section row principal_question">
        <label>Por favor indique el motivo o motivos de su insatisfacción:</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" checked value="1" name="Q2_QO1" id="Q2_QO1" />Limpieza habitación</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO2" id="Q2_QO2" />Atención del personal</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO3" id="Q2_QO3" />Restaurante, alimentación, calidad o falta de servicio</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO4" id="Q2_QO4" />Estado de las instalaciones</label>
    </div>
    <div class="section row">
        <label class="checkbox">
            <input type="checkbox" value="1" name="Q2_QO5" id="Q2_QO5" />Otros motivos, especificar</label>
    </div>
</div>
	
		
		

		<script>
			/*
			   instead of this you can use your code. that is
			   var id='<?php echo $cond->question_id_dep;?>';
			*/
			var id='1113'; 

			$("div#divQ"+id+" select").change(function(){
			   var ret = getQuestionOptionValues("div#divQ"+id);
			   alert('Selected option value is ' + ret);
			});

			var ret = getQuestionOptionValues("div#divQ"+id);
			alert('Selected option value is ' + ret);

			function getQuestionOptionValues(element) {
				return $(element+" select").val().split("_")[1].replace("QO","");
			}
			
			$("#divQ2 .checkbox input").click(function(){
				var ret = getCheckedCheckboxes();
				alert('checked checkboxes ' + ret);
			});
			
			function getCheckedCheckboxes(){
				var ar = Array();
				$("#divQ2 .checkbox input:checked").each(function(){
					ar.push($(this).attr('id').split("_")[1].replace("QO",""));
				});
				return ar;
			}
			
			alert('checked checkboxes ' + getCheckedCheckboxes());

		</script>

【讨论】：

你有很多内联脚本。以上所有内容都需要存在于加载事件中或页面底部。为什么在分配之间会有所有这些警报，为什么不重用您编写的函数？
@mplungjan 抱歉，我的目标只是让 javascript 初学者能够理解它。我会努力改变。感谢您的反馈。

【解决方案3】：

这个比较简单

给定

var ret = getQuestionOptionValues("div#divQ<?php echo $cond->question_id_dep;   ?>");

你可以的

function getQuestionOptionValues(selString) {
  var opt = $(selString+" select").val();
  return opt?parseInt(opt.split("QO")[1],10):"";
}

在加载 jQuery 之后定义并在加载 div 之后执行

例子：

    function getQuestionOptionValues(selString) {
      var opt = $(selString+" select").val();
      return opt?parseInt(opt.split("QO")[1],10):"";
    }
    $(function() {
      window.console&&console.log(getQuestionOptionValues("div#divQ1113"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="section row" id="divQ1113">
    <div class="section row principal_question">
        <label>Escoja una opción</label>    
    </div>
    <div class="section row sub_question"></div>
    <div class="section row">
        <select name="Q1113" id="Q1113">
            <option value="">Opciones</option>
            <option selected value="Q1113_QO3514">SI</option>
            <option value="Q1113_QO3515">NO</option>
        </select>    
    </div>
</div>

【讨论】：

【解决方案4】：

在我看来，这类似于以下之一：

您在某处使用错误名称引用函数时出现拼写错误
如果调用函数的代码和函数位于不同的文件中，它们是否以适当的顺序加载，即带有函数的脚本在使用它的代码之前加载？

除非实际代码与此处的 sn-ps 非常不同，否则可能不太可能的第三种解释是，您正在使用函数包装代码以操纵范围。

我在这里创建了一个带有稍微修改过的代码版本的 jsfiddle： https://jsfiddle.net/thedole/n10yxmsd/7/

var select = document.querySelector('#Q1113');
select.addEventListener('change', function(e){
    var ret = getQuestionOptionValues("div#divQ1113");
    alert(ret);
});

function getQuestionOptionValues(element) {
    var ret = [];
    $(element)
        .find("option")
        .filter(":selected")
        .each(function(){
           ret.push(parseInt($(this).attr("value").toString().replace(/Q\d+_QO/g,"")));
        });
    return ret;
}

我不熟悉 xui 库，我认为 jsfiddle 不支持它，所以我使用 jquery 代替，但我怀疑它们的行为非常相似。

这是 Douglas Crockfords 采用的脚本标签： http://javascript.crockford.com/script.html 特别是以下部分：

如果脚本正在定义其他人使用的函数或数据功能，则必须在使用前进行定义。所以定义脚本必须在使用脚本之前。

【讨论】：