javascript - jquery .hasClass 不工作应该

Question

您好，我的标签上有一些带有不同背景的复选框。 table 有4、6、8个座位。当我选择一张 table 时，假设有 8 个座位，我想用另一张图像更改背景图像，我的案例蓝色图像对应于八个背景图像。我正在尝试使用 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>

Answer 1

在这一行

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

您正在选择所有 .table_bg 元素，然后 hasClass 方法将测试它们是否有名为“four”的类。

您最可能想要的只是测试复选框的父元素，如下所示。 当复选框更改时，它将测试其父元素是否具有编号类，并根据该结果返回 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>