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

【问题标题】：Returning multiple values from function (undefined) jQuery/ifelse从函数（未定义）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。

标签： javascript jquery multiple-value

【解决方案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>

【讨论】：