Val 用于两个单独的选择

Question

我可以成功验证两个表单中的第一个，并根据用户选择的选项更改 CSS。

但是我不能对它下面的另一个表单做同样的事情。它似乎只适用于第一个。

这是我目前得到的：

jQuery:

// Race images

    $('select[name=raceselect]').val();

  if (!selectedValue) {
      $('.comp_race').css("background-position", "0px 0px");
 }
 else if (selectedValue === "Orc")  {
  $('.comp_race').css("background-position", "-32px -128px");
 }
else if (selectedValue === "Troll")  {
  $('.comp_race').css("background-position", "-32px 0px");
 }
 else if (selectedValue === "Undead")  {
  $('.comp_race').css("background-position", "-64px 0px");
 }
 else if (selectedValue === "Tauren")  {
  $('.comp_race').css("background-position", "-96px 0px");
 }
 else if (selectedValue === "Human")  {
  $('.comp_race').css("background-position", "0px -32px");
 }
 else if (selectedValue === "Night Elf")  {
  $('.comp_race').css("background-position", "-64px -32px");
 }
 else if (selectedValue === "Gnome")  {
  $('.comp_race').css("background-position", "-96px -32px");
 }
 else if (selectedValue === "Dwarf")  {
  $('.comp_race').css("background-position", "-32px -32px");
 }



 $(function() {
    $("#classselect").change(function() {

// Class images

    $('select[name=classselect]').val();

  if (!selectedValue) {
      $('.comp_class').css("background-position", "0px 0px");
 }
else if (selectedValue === "Warrior")  {
  $('.comp_class').css("background-position", "0px -96px");
 }
 else if (selectedValue === "Hunter")  {
  $('.comp_class').css("background-position", "-64px -64px");
 }
 else if (selectedValue === "Rogue")  {
  $('.comp_class').css("background-position", "-96px -96px");
 }
 else if (selectedValue === "Paladin")  {
  $('.comp_class').css("background-position", "-32px -64px");
 }
 else if (selectedValue === "Shaman")  {
  $('.comp_class').css("background-position", "0px -64px");
 }
else if (selectedValue === "Warlock")  {
  $('.comp_class').css("background-position", "-32px -96px");
 }
 else if (selectedValue === "Priest")  {
  $('.comp_class').css("background-position", "0px -128px");
 }
 else if (selectedValue === "Mage")  {
  $('.comp_class').css("background-position", "-96px -64px");
 }
  else if (selectedValue === "Druid")  {
  $('.comp_class').css("background-position", "-64px -96px");
 }


 });

HTML：

<div class="comp_race">
        <select name="raceselect" id="raceselect">
            <option value="" selected>Choose a race</option>
            <option value="Orc">Orc</option>
            <option value="Troll">Troll</option>
            <option value="Undead">Undead</option>
            <option value="Tauren">Tauren</option>
            <option value="Human">Human</option>
            <option value="Night Elf">Night Elf</option>
            <option value="Gnome">Gnome</option>
            <option value="Dwarf">Dwarf</option>
        </select>
        </div>

        <div class="comp_class">
        <select name="classselect" id="classselect">
            <option value="" selected>Choose a class</option>
            <option value="Warrior">Warrior</option>
            <option value="Hunter">Hunter</option>
            <option value="Rogue">Rogue</option>
            <option value="Paladin">Paladin</option>
            <option value="Shaman">Shaman</option>
            <option value="Warlock">Warlock</option>
            <option value="Priest">Priest</option>
            <option value="Mage">Mage</option>
            <option value="Druid">Druid</option>

        </select>
        </div>

当我使用第一个下拉菜单时，选择我想要的 CSS 更改（它正在更改大图像精灵的背景位置）。但是在第二个元素之后使用相同的代码似乎不起作用。

我尝试过使用 $("#raceselect").val(); val 的方法而不是 'select[name=raceselect]' 方法...但这并没有什么不同。

我是否缺少一些东西，比如没有正确“结束”第一个 val() 调用，以便脚本可以看到下一个 val()？

如果这有点令人困惑：我希望看到的最终产品是这样的：

• 两个下拉菜单
• 当用户在每个下拉菜单中选择选项时，所使用元素的 CSS 会发生变化（目前它只是其中一个元素，另一个不起作用）

谢谢！

Answer 1

您的 javascript 似乎缺少某些内容。它在哪里说：

 $('select[name=raceselect]').val();

我想你是想说

var selectedValue = $('select[name=raceselect]').val();

Answer 2

您需要将您的选择选项值分配给一个变量。您还必须针对选定的选项值。

var selectedValue = $('select[name=raceselect] option:selected').val();

这些是我要做的其他一些更改。主要是使用switch语句代替if和if else。与许多 if else 语句相比，switch 效率更高，速度更快。

$('select[name="classselect"]').on('change', function () {
    var selectvalue = $(this, ' option:selected').val(),
          bgPosition = '';

    switch(selectvalue){
        case 'Warrior':
            bgPosition = '0px -96px';
            break;
        case 'Hunter':
            bgPosition = '-64px -64px';
            break;
        case 'Rogue':
            bgPosition = '-96px -96px';
            break;
        case 'Paladin':
            bgPosition = '-32px -64px';
            break;
        case 'Shaman':
            bgPosition = '0px -64px';
            break;
        case 'Warlock':
            bgPosition = '0px -64px';
            break;
        case 'Priest':
            bgPosition = '-32px -96px';
            break;
        case 'Mage':
            bgPosition = '0px -128px';
            break;
        case 'Mage':
            bgPosition = '-96px -64px';
            break;
        case 'Druid':
            bgPosition = '-64px -96px';
            break;
        default :
            bgPosition = '0px 0px';
            break;
    }

    $('.comp_class').css("background-position", bgPosition);
});



$('select[name=raceselect]').on('change', function () {
    var selectvalue = $(this, ' option:selected').val(),
          bgPosition = '';

    switch(selectvalue){
        case 'Orc':
            bgPosition = '-32px -128px';
            break;
        case 'Troll':
            bgPosition = '-32px 0px';
            break;
        case 'Undead':
            bgPosition = '-64px 0px';
            break;
        case 'Tauren':
            bgPosition = '-96px 0px';
            break;
        case 'Human':
            bgPosition = '0px -32px';
            break;
        case 'Night Elf':
            bgPosition = '-64px -32px';
            break;
        case 'Gnome':
            bgPosition = '-96px -32px';
            break;
        case 'Dwarf':
            bgPosition = '-96px -32px';
            break;
        default :
            bgPosition = '0px 0px';
            break;
    }

    $('.comp_race').css("background-position", bgPosition);
});