Question

您好我在标签上有一些不同背景的复选框。桌子有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>

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>

jquery .hasClass不应该工作

1 个答案: