The Jquery Function is designed to execute each time the trigger is clicked, however, it is not functioning as

Question

The Jquery Function is designed to execute each time the trigger is clicked, however, it is not functioning as

My lovely little website has a charming div that hides any content overflowing the wrapper. I'm trying to adjust the margin-top by $value-120px every time a span with the class of .maisfilme is clicked. Here's my current code:


$(document).ready(function (){
$(".maisfilme").on("click", function() {
     var $mtop = $(this).css('margin-top');

        var $vai = (parseInt($mtop)+ 110 + "px");
    $("#filme").css ({
        'margin-top' : "-"+$vai
    });
});
});

Initially, this code works as intended. It calculates the new margin-top value, adds 120px, and shifts the div upwards. However, the issue arises when clicking on .maisfilme more than once. The function only executes once on subsequent clicks. Can someone please advise me on how to ensure that the function runs each time .maisfilme is clicked?

jquery css function html

Answer 1

Answer №1

When you perform the action a second time, the result will not increase in magnitude as desired because of the improper logic used with the sign. Adjusting the sign logic is necessary to achieve a more negative outcome with each iteration.

Furthermore, be mindful that you are retrieving the css from $(this), but applying it to $("#filme"). For the accumulation to occur with each click, these objects must be the same. Ensure they are pointing to the same object for the desired effect.

To achieve a greater negative value with each click, consider implementing either of the following options:

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (parseInt($mtop) - 110) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});

Alternatively, you can use a slightly modified version to handle cases where the initial margin-top value is not zero:

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (-(Math.abs(parseInt($mtop)) + 110)) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});

Answer 2

When you perform the action a second time, the result will not increase in magnitude as desired because of the improper logic used with the sign. Adjusting the sign logic is necessary to achieve a more negative outcome with each iteration.

Furthermore, be mindful that you are retrieving the css from $(this), but applying it to $("#filme"). For the accumulation to occur with each click, these objects must be the same. Ensure they are pointing to the same object for the desired effect.

To achieve a greater negative value with each click, consider implementing either of the following options:

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (parseInt($mtop) - 110) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});

Alternatively, you can use a slightly modified version to handle cases where the initial margin-top value is not zero:

$(document).ready(function (){
    $(".maisfilme").on("click", function() {
        var $mtop = $(this).css('margin-top');

        var $vai = (-(Math.abs(parseInt($mtop)) + 110)) + "px";
        $(this).css ({
            'margin-top' : $vai
        });
    });
});

The Jquery Function is designed to execute each time the trigger is clicked, however, it is not functioning as

Answer №1

Similar questions

What is the process for integrating the toastr-rails gem into a Rails 6 project?

Rotate text vertically (90 degrees) on IE and Firefox browsers

jQuery .click() function doesn't seem to be triggering as anticipated

Error: Unable to locate or read the file "style.scss" for import

injecting a substantial number of elements into the DOM

Scroll down 1 page using Javascript and Jquery

Is there a way for me to determine which class has been selected using jQuery and JavaScript?

What is the proper way to implement autocomplete in a JavaScript code?

spaces between sections with no padding or borders

Navigating through directories in an HTML file

Ways to invoke the parent function from a child component in JavaScript

What is the best way to make a canvas element fit the entire browser window without causing scroll bars to appear?

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

Working with Jquery to access and iterate through associative objects

Managing varied PHP submissions using a single 'isset' declaration

Remove multiple HTML rows based on checkbox selection

Move to the first item on the list without any unnecessary scrolling of the view - ReactJS

Customizing CSS for the activity feed on Facebook using HTML5

Child div set to 100% height within parent div with auto height

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via