Question

我要做的是使用3个可点击的div作为开关，当点击时，它会改变元素的背景（使用属性data-image-src），这是div的祖父母。

继承我的HTML：

<header class="header-index locations-header col-lg-12 clearfix " data-parallax="scroll" data-image-src="images/2V1C8599.jpg">
    <section class="locations-switcher col-md-12 clearfix">
        <div class="first-switch col-sm-4"><h2>div one</h2></div>
        <div class="second-switch col-sm-4"><h2>div two</h2></div>
        <div class="third-switch col-sm-4"><h2>div three</h2></div>
    </section>
</header>

和我的jQuery：

$(".locations-switcher div").click( function() {
        if($("div", this).attr('class') === "first-switch") {
            $(".locations-header").attr( "data-image-src", "../images/IMG_4519_.jpg)" );
        } else if( $("div", this).attr('class') === "second-switch") {
            $(".locations-header").attr( "data-image-src", "../images/2V1C8599.jpg" );
        } else if ($("div", this).attr('class') === "third-switch") {
            $(".locations-header").attr( "data-image-src", "../images/UBC-Interior.jpg" );
        }
    });

任何有关它无法正常工作的线索。我还是javascript和jQuery的新手。任何帮助都会非常棒。

Answer 1

use:
if($(this).hasClass('first-switch')){
instead of:
 if($("div", this).attr('class') === "first-switch") {

我认为$('div', this)会查找CHILD div，您想要查看已找到的元素。
因为元素上还有其他类，.attr('class')将返回整个字符串，.hasClass()将检查整个列表
第一个源字符串中有一个额外的括号
取决于data-image-src的使用方式，您可能需要触发其他内容来重绘它。我通常手动设置.css('background-image', 'url(' + srcString + ')')

如何使用if语句使用jQuery更改祖父元素的背景图像

1 个答案: