javascript - jQuery .hasClass无法正常工作

Closed. This question needs debugging details。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                
                    5年前关闭。
            
        

    

您好，我在标签上有一些具有不同背景的复选框。有4,6,8个座位的桌子。当我选择一张桌子时，假设我有8个席位，我想用另一张图片更改背景图片，我的案例蓝色图片与8个bg img对应。我正在尝试使用hasClass选择器，但是即使没有“四个”类并且它是“八个”类，它也总是会获得第一个选择器。
这是我的脚本：

<script type="text/javascript">
$(".table").change(function(){
    if ($( ".table_bg" ).hasClass( "four" ))
    {
  var c = this.checked ? "url(http://rezerv.city/images/table_bg2.png)" : "url(http://rezerv.city/images/table_bg.png)";
    }
    else if($( ".table_bg" ).hasClass( "six" ))
    {
    var c = this.checked ? "url(http://rezerv.city/images/table6_bg2.png)" : "url(http://rezerv.city/images/table6_bg.png)";
    }
    else if($( ".table_bg" ).hasClass( "eight" ))
    {
    var c = this.checked ? "url(http://rezerv.city/images/table8_bg2.png)" : "url(http://rezerv.city/images/table8_bg.png)";
    }
  $(this).parent().css("background-image", c);
});
</script>

html

        <label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:0px;margin-left:0px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="64" id="1" name="table[]" class="checkbox" ><h4>1</h4><h5 class="nr_pers">8 pers</h5>
        </label>
        <label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:0px;margin-left:215px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="65" id="2" name="table[]" class="checkbox" ><h4>2</h4><h5 class="nr_pers">8 pers</h5>
        </label>
        <label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:0px;margin-left:390px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="66" id="3" name="table[]" class="checkbox" ><h4>3</h4><h5 class="nr_pers">8 pers</h5>
        </label>
        <label class="table_bg table_bg_6 six" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:197px;margin-left:0px;background-image:url(http://rezerv.city/images/table6_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="67" id="4" name="table[]" class="checkbox" ><h4>4</h4><h5 class="nr_pers">6 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:197px;margin-left:215px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="68" id="5" name="table[]" class="checkbox" ><h4>5</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:197px;margin-left:390px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="69" id="6" name="table[]" class="checkbox" ><h4>6</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:197px;margin-left:565px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="70" id="7" name="table[]" class="checkbox" ><h4>7</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_6 six" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:354px;margin-left:0px;background-image:url(http://rezerv.city/images/table6_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="71" id="8" name="table[]" class="checkbox" ><h4>8</h4><h5 class="nr_pers">6 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:354px;margin-left:215px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="72" id="9" name="table[]" class="checkbox" ><h4>9</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:354px;margin-left:390px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="73" id="10" name="table[]" class="checkbox" ><h4>10</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:354px;margin-left:565px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="74" id="11" name="table[]" class="checkbox" ><h4>11</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_6 six" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:511px;margin-left:0px;background-image:url(http://rezerv.city/images/table6_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="75" id="12" name="table[]" class="checkbox" ><h4>12</h4><h5 class="nr_pers">6 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:511px;margin-left:215px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="76" id="13" name="table[]" class="checkbox" ><h4>13</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:511px;margin-left:390px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="77" id="14" name="table[]" class="checkbox" ><h4>14</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:511px;margin-left:565px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="78" id="15" name="table[]" class="checkbox" ><h4>15</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_6 six" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:708px;margin-left:0px;background-image:url(http://rezerv.city/images/table6_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="79" id="16" name="table[]" class="checkbox" ><h4>16</h4><h5 class="nr_pers">6 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:708px;margin-left:175px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="80" id="17" name="table[]" class="checkbox" ><h4>17</h4><h5 class="nr_pers">4 pers</h5>
        </label>
        <label class="table_bg table_bg_6 six" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:708px;margin-left:350px;background-image:url(http://rezerv.city/images/table6_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="81" id="18" name="table[]" class="checkbox" ><h4>18</h4><h5 class="nr_pers">6 pers</h5>
        </label>
        <label class="table_bg table_bg_4 four" data-toggle="tooltip" data-trigger="click hover"   data-placement="bottom" style="margin-top:708px;margin-left:525px;background-image:url(http://rezerv.city/images/table_bg.png); background-repeat:no-repeat;">
        <input class="table" type="checkbox" value="82" id="19" name="table[]" class="checkbox" ><h4>19</h4><h5 class="nr_pers">4 pers</h5>
        </label>

最佳答案

在这条线

if ($( ".table_bg" ).hasClass( "four" ))

您正在选择所有.table_bg元素，然后hasClass方法将进行测试以查看它们中是否有一个名为“四个”的类。

您最可能想要的只是测试复选框的父元素，如下所示。
复选框更改时，它将测试以查看其父元素是否具有编号的类，并将基于该元素返回url。

$(".table").change(function() {
  if ($(this).parent().hasClass("four")) {
    var c = this.checked ? "url(http://rezerv.city/images/table_bg2.png)" : "url(http://rezerv.city/images/table_bg.png)";
  } else if ($(this).parent().hasClass("six")) {
    var c = this.checked ? "url(http://rezerv.city/images/table6_bg2.png)" : "url(http://rezerv.city/images/table6_bg.png)";
  } else if ($(this).parent().hasClass("eight")) {
    var c = this.checked ? "url(http://rezerv.city/images/table8_bg2.png)" : "url(http://rezerv.city/images/table8_bg.png)";
  }
  $(this).parent().css("background-image", c);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover" data-placement="bottom" style="margin-top:0px;margin-left:0px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
  <input class="table" type="checkbox" value="64" id="1" name="table[]" class="checkbox">
  <h4>1</h4>
  <h5 class="nr_pers">8 pers</h5>
</label>
<label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover" data-placement="bottom" style="margin-top:0px;margin-left:215px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
  <input class="table" type="checkbox" value="65" id="2" name="table[]" class="checkbox">
  <h4>2</h4>
  <h5 class="nr_pers">8 pers</h5>
</label>
<label class="table_bg table_bg_8 eight" data-toggle="tooltip" data-trigger="click hover" data-placement="bottom" style="margin-top:0px;margin-left:390px;background-image:url(http://rezerv.city/images/table8_bg.png); background-repeat:no-repeat;">
  <input class="table" type="checkbox" value="66" id="3" name="table[]" class="checkbox">
  <h4>3</h4>
  <h5 class="nr_pers">8 pers</h5>
</label>

关于javascript - jQuery .hasClass无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28394784/