从函数(未定义)jQuery / ifelse返回多个值
Posted
技术标签:
【中文标题】从函数(未定义)jQuery / ifelse返回多个值【英文标题】:Returning multiple values from function (undefined) jQuery/ifelse 【发布时间】:2022-01-24 01:11:02 【问题描述】:我之前试图寻找答案,但是我卡住了。
我正在尝试从函数中获取多个值。值取决于用户选择的其他一些参数。因此,在我尝试从中提取多个值并稍后使用它的函数中,每个值都经过测试(if / else),并根据结果/选择的选项获得准确的值。
为什么我会变得不确定?
这个概念看起来像这样:
function countries()
var countrieslist;
var countriesIDs;
if ($("#1").is("checked") && !$("#2").is("checked"))
var countrieslist = $("[for='1']").text();
else if ($("#1").is("checked") && $("#2").is("checked"))
var countrieslist = $("[for='1']").text() + " and " + $("[for='2']").text();
else if (!$("#1").is("checked") && $("#2").is("checked"))
var countrieslist = $("[for='2']").text();
if ($("#1").is("checked") && !$("#2").is("checked"))
var countriesIDs = $("[for='1']").text();
else if ($("#1").is("checked") && $("#2").is("checked"))
var countriesIDs = $("[for='1']").text() + " and " + $("[for='1']").text();
else if (!$("#1").is("checked") && $("#2").is("checked"))
var countriesIDs = $("[for='2']").text();
/*
Works when i declare these variables manually:
var countrieslist = "countrieslist--- test";
var countriesIDs = "countriesIDs--- test";
*/
return
countrieslist,
countriesIDs
cvalues = countries();
$("#1,#2").change(function()
$(".countrieslist").text(cvalues.countrieslist)
$(".countriesIDs").text(cvalues.countriesIDs)
);
.row
background: #f8f9fa;
margin-top: 5px;
.col
padding: 10px;
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="card text-dark mb-3" style="border-color: rgba(0, 0, 0, 0.125); background-color: rgb(255, 255, 255);">
<div class="card-header" style="border-color:none;background-color:rgba(0,0,0,.03)">Countries</div>
<div class="card-body ps-2 pe-2">
<input type="checkbox" class="btn-check" id="1" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm mb-1" for="1">country1</label>
<input type="checkbox" class="btn-check" id="2" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm mb-1" for="2">country2</label>
</div>
</div>
Countrieslist:
<div class="alert alert-success countrieslist" role="alert">
</div>
CountriesIDs:
<div class="alert alert-success countriesIDs" role="alert">
</div>
</div>
</div>
</div>
jsfiddle 上的相同代码: https://jsfiddle.net/ribosed/a132okf5/44/
谢谢
【问题讨论】:
只需要声明一次变量,而不是每次赋值。 不要在块内使用var
关键字重新定义变量。
您在页面首次加载时调用countries()
,而不是在用户更改复选框时调用。
将cvalues = countries();
移动到.change()
函数中。
感谢您的回答。当您调用 cvalues.countrieslist 时,我坚持认为,实际上,默认情况下,您会调用 countries() 及其值countieslist。
【参考方案1】:
如果有人觉得这很有用,这是工作代码(对我来说):
function countries()
var countrieslist;
var countriesIDs;
if($("#1").is(":checked") && !$("#2").is(":checked"))
countrieslist = $("[for='1']").text();
else if($("#1").is(":checked") && $("#2").is(":checked"))
countrieslist = $("[for='1']").text() + " and " + $("[for='2']").text() ;
else if(!$("#1").is(":checked") && $("#2").is(":checked"))
countrieslist = $("[for='2']").text();
if($("#1").is(":checked") && !$("#2").is(":checked"))
countriesIDs = $("#1").attr("id");
else if($("#1").is(":checked") && $("#2").is(":checked"))
countriesIDs = $("#1").attr("id") + " and " + $("#2").attr("id");
else if(!$("#1").is(":checked") && $("#2").is(":checked"))
countriesIDs = $("#2").attr("id");
return countrieslist, countriesIDs
$( "#1,#2" ).change(function ()
cvalues = countries();
$(".countrieslist").text(cvalues.countrieslist)
$(".countriesIDs").text(cvalues.countriesIDs)
);
.row
background: #f8f9fa;
margin-top: 5px;
.col
padding: 10px;
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="card text-dark mb-3" style="border-color: rgba(0, 0, 0, 0.125); background-color: rgb(255, 255, 255);">
<div class="card-header" style="border-color:none;background-color:rgba(0,0,0,.03)">Countries</div>
<div class="card-body ps-2 pe-2">
<input type="checkbox" class="btn-check" id="1" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm mb-1" for="1">country1</label>
<input type="checkbox" class="btn-check" id="2" autocomplete="off">
<label class="btn btn-outline-secondary btn-sm mb-1" for="2">country2</label>
</div>
</div>
Countrieslist:
<div class="alert alert-success countrieslist" role="alert">
</div>
CountriesIDs:
<div class="alert alert-success countriesIDs" role="alert">
</div>
</div>
</div>
</div>
【讨论】:
以上是关于从函数(未定义)jQuery / ifelse返回多个值的主要内容,如果未能解决你的问题,请参考以下文章