使用 jQuery 在 wordpress 上使更多的整个 div 可点击

Question

SUMMARIZE THE PROBLEM

I state that I know practically nothing about html and javascript languages, I know the css. On wordpress, with visual composer, i was trying to make an entire row clickable. I've done it using a jQuery code founded online:

<script type="text/javascript"> 
jQuery(".LinkZoom1").click(function() {
    window.location = "http://www.framedvision.org/portfolio/videomapping_oggetti_milano/";
});
</script>

I've added to the visual composer the object for java and I've put in the code. After I created the classes, inserted the link, added to the CSS the "cursor: pointer" function and everything works correctly.

THE PROBLEM IS THAT IT WORKS ONLY ON A SINGLE ROW. When I try to duplicate the code, assign different classes and links to create more clickable divs, it doesn't work. The result is that only the first div of the page is clickable, the divs are not.

WHAT I'VE TRIED

I tried the following codes in different combinations:

<script type="text/javascript"> 
jQuery(".class1”).click(function() {
    window.location = “#1”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class2”).click(function() {
    window.location = “#2”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class3”).click(function() {
    window.location = “#3”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class4”).click(function() {
    window.location = “#4”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class5”).click(function() {
    window.location = “#5”;
}); 
</script>

Always using the object for java code: I put them all together, put individually in the row that I want to make clickable, it doesn't work. The result is always the same: only the first div becomes clickable. Even moving the object for java code away, from the first row to other rows, the result is the same. The first div is always the only clickable.

Answer 1

To make sure your js jquery code is valid, add a script through a.js file

But first of all, look for your theme's footer.php file and add the code below:

jQuery(document).ready(function(){
    jQuery(".your_class").click(function() {
        window.location = "https://bluebezer.com.br";
    }); 
});

right after wp_footer ();

        <?php wp_footer(); ?> 

        <!-- add here the sample code -->

        jQuery(document).ready(function(){
            jQuery(".your_class").click(function() {
                window.location = "https://bluebezer.com.br";
            }); 
        });

    </body>
</html>

Remember that you must put the class in the elements you want it to be clickable and the elements must have the class you used in the javascript code exactly as you wrote it.

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>


<div class="your_class35413"> <!-- this will not execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class4156130"> <!-- this will not execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>

Answer 2

I found the solution. By importing the code written above, as corrected by you, it works. I don't know if this method is theorically correct, but it works fine. So...

In the visual composer, you have to insert an object to add the java code in each row that you want to make clickable (for example: for 5 clickable divs, you make 5 objects to insert the java code). Inside each object you have to insert the specific code for each class:

<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>