从函数（未定义）jQuery / ifelse返回多个值

Posted 2023-02-22

【中文标题】从函数（未定义）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>