Question

修改，更新！

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

首先，这是我的问题：

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

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

不幸的是，我遇到了一个问题。我不确定我做错了什么，但是原来的console.log显示了值应该是两个“对象”（在这种情况下，'cs'和'schwarz'），当我点击表单按钮时什么都没发生。

我尝试了一些不同的东西，但我遇到了类似的问题。完全陷入困境，我的大脑现在被炸--.-帮助？ XD

  $(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在运行时被分配了值并存储了[object..] itselft，您应该在单击处理程序的两个部分中添加值。请尝试以下代码：

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

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

function newPath(){
   console.log($htmlImagePath);
}

DEMO

Answer 2

$selection1和$selection2是JQuery对象，您应该使用它们持有的值来连接，如下所示：

$selection1.val()
$selection2.val()

Here is the update JSFiddle，其中console.log显示<img src='images/cs-schwarz.jpg'

更正后的行：

$htmlImagePath = $htmlImagePath + $selection1.val() + '-';

$htmlImagePath = $htmlImagePath + $selection2.val() + ".jpg'";

Answer 3

当您的代码在页面上运行时，按照$htmlImagePath = $htmlImagePath + $selection1 + '-';的方式将对象分配给$ htmlImagePath 并且作为你的代码，此行在页面加载后永远不会执行第二次，这就是$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

抓取单选按钮值但有可变问题

3 个答案: