Question 2178 in Wordpress Question posted in
The official Wordpress documentation can be found here.

jQuery in WordPress with Elementor

I am trying to use jQuery to indicate the right parts with pointers on 2D drawings. but css of pointers and images are not getting changed by the jQuery I wrote.

now sure why, jQuery seems not working on WordPress with Elementor.

when the mouse gets hovered over the image of the parts, the pointer should light up in the 2D drawing.

here is what I tried,

<script>
jQuery(function () {
    show_scroll_ele();

    //product hover
    jQuery(".product li").mouseenter(function () {
        var temp_idx = $(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".pointer span").eq(temp_idx).addClass("selected");
    });
    jQuery(".pointer span").mouseenter(function () {
        var temp_idx = $(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".product li").eq(temp_idx).addClass("selected");
    });
});
});
</script>

<div class="product_wrap">
    <div class="product">
        <ul>
            <li class="selected">
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro01.png" alt="Pintle" /></div>
                <p>Pintle</p>
            </li>
            <li class="">
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro02.png" alt="Connecting Rod" /></div>
                <p>Connecting Rod</p>
            </li>
            <li class="">
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro03.png" alt="Shaft" /></div>
                <p>Shaft</p>
            </li>
            <li class="">
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro04.png" alt="Propeller Shaft" /></div>
                <p>Propeller Shaft</p>
            </li>
        </ul>
    </div>
    <div class="pointer ship">
        <span class="point01 selected">Pintle</span>
        <span class="point02">Connecting Rod</span>
        <span class="point03">Shaft</span>
        <span class="point04">Propeller Shaft</span>
        <img src="/wp-content/uploads/2022/08/ship_pointer.png" alt="도면이미지" />
    </div>

    <div class="clb"></div>
</div>

CSS Code:

.product_wrap{margin-top:60px;}
.product_wrap .product{float:left;width:600px;}
.product_wrap .product ul{text-align:center;}
.product_wrap .product ul li{float:left;margin:0 24px 4px 0;cursor:pointer;}
.product_wrap .product ul li .img{border:1px solid #ddd;}
.product_wrap .product ul li p{font-size:13.4px;font-weight:300;color:#333;padding:7px 0;letter-spacing:0.4px;}
.product_wrap .product ul li.selected .img{border:1px solid #0A96E8;}
.product_wrap .product ul li.selected p{color:#0A96E8;}
.product_wrap .pointer{float:right;position:relative;width:570px;}
.product_wrap .pointer span{display:block;position:absolute;font-size:12.2px;font-weight:400;color:#222;line-height:26px;padding:0 10px;border:1px solid #aaa;background-color:#fff;letter-spacing:0.4px;cursor:pointer;}
.product_wrap .pointer span.selected{border:1px solid #0A96E8;background-color:#0A96E8;color:#fff;}

.product_wrap .ship span.point01{top:167px;left:40px;}
.product_wrap .ship span.point02{top:320px;left:420px;}
.product_wrap .ship span.point03{top:203px;left:248px;}
.product_wrap .ship span.point04{top:283px;left:210px;}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to make it work !

    final code below,

    <script
  src="https://code.jquery.com/jquery-3.6.2.js"
  integrity="sha256-pkn2CUZmheSeyssYw3vMp1+xyub4m+e+QK4sQskvuo4="
  crossorigin="anonymous"></script>
<script type="text/javascript">>

jQuery(function(){
    
    //product hover
    jQuery(".product li").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".pointer span").eq(temp_idx).addClass("selected");
    });
    jQuery(".pointer span").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".product li").eq(temp_idx).addClass("selected");
    });
}); 

</script>
    .product_wrap{
        margin-top: 60px;
}
.product{
        float: left;
        width: 600px;
}
.product ul{
        text-align: center;
}
.product ul li{
        float: left;
        margin: 0 24px 4px 0;
        cursor: pointer;
}
.product ul li .img{
        border: 1px solid #ddd;
}
.product ul li p{
        font-size: 13.4px;
        font-weight: 300;
        color: #333;
        padding: 7px 0;
        letter-spacing: 0.4px;
}
.product ul li.selected .img{
        border: 5px solid #0A96E8;
}
.product ul li.selected p{
        color: #0ff;
}
.pointer{
        float: right;
        position: relative;
        width: 570px;
}
.pointer span{
        display: block;
        position: absolute;
        font-size: 12.2px;
        font-weight: 400;
        color: #222;
        line-height: 26px;
        padding: 0 10px;
        border: 1px solid #aaa;
        background-color: #fff;
        letter-spacing: 0.4px;
        cursor: pointer;
}
.pointer span.selected{
        border: 5px solid #f00;
        background-color: #0A96E8;
        color: #fff;
}

.point01{
        position: absolute;
        top: 167px;
        left: 40px;
}
.point02{
        position: absolute;
        top: 320px;
        left: 420px;
}
.point03{
        position: absolute;
        top: 203px;
        left: 248px;
}
.point04{
        position: absolute;
        top: 283px;
        left: 210px;
}
    <div class="product_wrap">
        <div class="product">
            <ul>
                <li class="selected">
                    <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro01.png" alt="Pintle"></div>
                    <p>Pintle</p>
                </li>
                <li class="">
                    <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro02.png" alt="Connecting Rod"></div>
                    <p>Connecting Rod</p>
                </li>
                <li class="">
                    <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro03.png" alt="Shaft"></div>
                    <p>Shaft</p>
                </li>
                <li class="">
                    <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro04.png" alt="Propeller Shaft"></div>
                    <p>Propeller Shaft</p>
                </li>
            </ul>
        </div>
        <div class="pointer ship">
            <span class="point01 selected">Pintle</span>
            <span class="point02">Connecting Rod</span>
            <span class="point03">Shaft</span>
            <span class="point04">Propeller Shaft</span>
            <img src="/wp-content/uploads/2022/08/ship_pointer.png" alt="도면이미지">
        </div>
        
        <div class="clb"></div>
</div>


  2. 0

    @Michael O’dlee,
    Your problem seems to be the undefined function show_scroll_ele();

    I have created a fiddle with the call to this function commented out. The mouseover now causes the changes I think you want:

    https://jsfiddle.net/1k86rtz2/1/

    (Note I have simplified and formatted your CSS, and exaggerated the changes in the CSS [for my sake]. The changes to the CSS are not required for my solution.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search