Question

我正在尝试根据两组单选按钮找到一个网址，我的HTML看起来像这样：

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a href="url from script">CONTINUE</a>

我知道我必须使用javascript才能获得正确的网址。

我想它必须像这样构建：

if comp = "pink" then
  switch(skin)
  {
    case Fair:
      url = www.pinkfair.com;
      break;
    case Medium:
      url = www.pinkmedium.com;
      break;
    case Tan:
      url = www.pinktan.com;
      break;
    case Dark:
      url = www.pinkdark.com;
      break;
    }
else
  switch(skin)
  {
    case Fair:
      url = www.blackfair.com;
      break;
    case Medium:
      url = www.blackmedium.com;
      break;
    case Tan:
      url = www.blacktan.com;
      break;
    case Dark:
      url = www.blackdark.com;
      break;
    }

但是你可以看到我是一个javascript新手，是否有人可以帮助我微调代码。

提前致谢。

/让

Answer 1

解决方案是将特定类添加到这样的单选按钮（您也可以按名称使用选择器，我个人觉得更容易选择类）：

<form>
  <fieldset>
    <label><input class="first" type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input class="first" type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input class="second" type="radio" name="skin" id="fair" value="Fair">Fair</label>
    <label><input class="second" type="radio" name="skin" id="medium" value="Medium">Medium</label>
    <label><input class="second" type="radio" name="skin" id="tan" value="Tan">Tan</label>
    <label><input class="second" type="radio" name="skin" id="dark" value="Dark">Dark</label>
  </fieldset>
</form>

<a class="resultLink" href="url from script">CONTINUE</a>

...并且由于你已经将输出url的一部分保留为值/ ids，让jQuery处理剩下的...

$('.first, .second').change(function() {
    var firstPart = $('.first:checked').val();
    var secondPart = $('.second:checked').val();
    var url = 'www.' + firstPart + secondPart + '.com';

    $('.resultLink').attr('href', url);
})

对于更复杂的场景，请使用Sajad Deyargaroo提供的解决方案。

Answer 2

由于我们必须根据两个单选按钮组中选定的单选按钮获取URL，因此您编写的逻辑实际上可以正常工作。我在JavaScript / JQuery中编写了相同的内容，如下所示。

但在此之前，我想通过将url属性添加到单选按钮向您展示简单的解决方案，这将减少代码。

这是工作（测试）解决方案。

HTML

<form>
  <fieldset>
    <label><input type="radio" name="comp" id="pink" value="Pink">Pink</label>
    <label><input type="radio" name="comp" id="black" value="Black">Black</label>
    <br>
    <br>
    <label><input type="radio" name="skin" id="fair" value="Fair" data-pinkurl="www.pinkfair.com" data-blackurl="www.blackfair.com" >Fair</label>
    <label><input type="radio" name="skin" id="medium" value="Medium" data-pinkurl="www.pinkmedium.com" data-blackurl="www.blackmedium.com">Medium</label>
    <label><input type="radio" name="skin" id="tan" value="Tan" data-pinkurl="www.pinktan.com" data-blackurl="www.blacktan.com">Tan</label>
    <label><input type="radio" name="skin" id="dark" value="Dark" data-pinkurl="www.pinkdark.com" data-blackurl="www.blackdark.com">Dark</label>
  </fieldset>
</form>

脚本

var comp = $("input[type='radio'][name='comp']:checked").val();
var url = '';

if (comp == "Pink"){
   url = $("input[type='radio'][name='skin']:checked").attr("data-pinkurl");
}
else{
   url = $("input[type='radio'][name='skin']:checked").attr("data-blackurl");
}

另外，如上所述，下面是您更新的代码，也可以正常使用。

var comp = $("input[type='radio'][name='comp']:checked").val();
var skin = $("input[type='radio'][name='skin']:checked").val();
var url = '';

if (comp == "Pink"){
  switch(skin)
  {
    case "Fair":
      url = "www.pinkfair.com";
      break;
    case "Medium":
      url = "www.pinkmedium.com";
      break;
    case "Tan":
      url = "www.pinktan.com";
      break;
    case "Dark":
      url = "www.pinkdark.com";
      break;
    }
}
else{
  switch(skin)
  {
    case "Fair":
      url = "www.blackfair.com";
      break;
    case "Medium":
      url = "www.blackmedium.com";
      break;
    case "Tan":
      url = "www.blacktan.com";
      break;
    case "Dark":
      url = "www.blackdark.com";
      break;
    }
}

最后，如果您不想使用jQuery并想要一个纯粹的基于JavaScript的解决方案，那么您需要检查每个单选按钮，看看它是否已被选中。

if (document.getElementById('pink').checked) {
  comp = document.getElementById('pink').value;
}

从两组单选按钮获取URL

2 个答案: