javascript - 获取单选按钮值但存在变量问题

Question

编辑、更新!

非常感谢 Shailendra Sharma 的帮助:) 每个人的回答都教会了我一些东西，所以谢谢大家!

<小时/>

首先，这是我的问题:

我试图做到这一点，以便当单击单选按钮时，它将在两个表单字段中将单选按钮的值添加到两个不同的变量(selection1 和 2)中

之后，它将把这些路径添加到 $htmlImagePath 变量中。用户单击两个选择后，它将完成该路径，并且它将成为图像源路径，此时我将拥有将该完整路径附加到 HTML 并显示图像的代码。

不幸的是，我遇到了问题。我不太确定我做错了什么，但原始的 console.log 显示了两个“对象”，其中值应该在(在本例中为“cs”和“schwarz”)，当我单击表单按钮时，什么也没发生。

我尝试了一些不同的方法，但遇到了类似的问题。完全卡住了，我的大脑现在已经炸了 -.- 救命吗？ XD

这是 JS fiddle :https://jsfiddle.net/1qk59sk7/

  $(document).ready(function() {

      var $htmlImagePath = "<img src='images/";
      var $selection1 = ($("input[type=radio][name='finishes'][value='cs']").prop("checked", true));
      var $selection2 = ($("input[type=radio][name='colours'][value='schwarz']").prop("checked", true));

      $("#finish input:radio").on("click", function() {
          $selection1 = $("#finish input:checked").val(); 
      });

      $htmlImagePath = $htmlImagePath + $selection1 + '-';

      $("#color input:radio").on ("click", function() {
          $selection2 = $("#color input:checked").val();
      });

      $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
      console.log($htmlImagePath);
  }); 

这是 HTML

 <div id="finish" class="spalte3">
  <p >Ausfuehrungen Rahmen:</p>
   <form>
    <div>
      <input type="radio" name="finishes" value="cs" class="image_selection">
      <label for="cs">Chrome glanz</label>
    </div>
    <div>
     <input type="radio" name="finishes" value="cbr"   class="image_selection">
     <label for="cbr">Chrome gebuerstet</label>
    </div>
    <div>
      <input type="radio" name="finishes" value="cbl" class="image_selection">
      <label for="cbl">Schwarz verchromt</label>
    </div>
  </div>
</form>
<div id="color" class="spalte3">
  <p>Ausfuehrungen Tablare:</p>
   <form>
     <div>
       <input type="radio" name="colours" value="schwarz"  class="image_selection">
       <label for="schwarz">Schwarz</label>
     </div>
    <div>
      <input type="radio" name="colours" value="weiss-s" class="image_selection">
      <label for="weiss-s">Weiss</label>
    </div>
     <div>
      <input type="radio" name="colours" value="dunkelrot" class="image_selection">
      <label for="dunkelrot">Dunkelrot</label>
     </div>
     <div>
      <input type="radio" name="colours" value="fango"   class="image_selection">
      <label for="fango">Fango</label>
     </div>
    </form>
   </div>
 <div id="log" class="spalte3">
    <img class="skizze-res" src="images/poolfinish/cs-schwarz.jpg"   alt="Chrom glanz mit Schwarz">
 </div> 

Answer 1

当您的代码在页面加载时运行时，通过以下方式将对象分配给 $htmlImagePath $htmlImagePath = $htmlImagePath + $selection1 + '-'; 并且由于您的代码在页面加载后永远不会执行第二次，这就是为什么 $htmlImagePath 永远不会使用新值更新

查看此代码

  $(document).ready(function(){
        var $htmlImagePath = "<img src='images/";
        var $selection1 = ($("input[type=radio][name='finishes'][value='cs']").prop ("checked", true));
        var $selection2 = ($("input[type=radio][name='colours'][value='schwarz']").prop ("checked", true));

            $("#finish input:radio,#color input:radio").on ("click", function(){
                $selection1 = $("#finish input:checked").val(); 
                $selection2 = $("#color input:checked").val();
                $htmlImagePath = $htmlImagePath + $selection1 + '-';
                $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
                console.log($htmlImagePath);
         });

    }); 

<强> here the fiddle