从函数(未定义)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返回多个值的主要内容,如果未能解决你的问题,请参考以下文章

从 jquery ajax 调用分配变量返回未定义

jQuery Ajax 从控制器操作方法返回未定义

jQuery选择返回未定义

来自 .ajax() 调用的数据的 jQuery .find() 返回未定义

jquery onclick 函数未定义

如何从 C 中的函数返回初步的未定义结构?