Select a division and retrieve the identification of a different division

Question

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div.

Here is my attempt:

$(".map_flag").on("click",function(){
    var selectedID = ($(this).attr("data_modal"));

    $("#" + selectedID).fadeIn(300, function(){
        $("#" + selectedID).find(".modal_content").fadeIn(300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="map_flag" data_modal="map_1"> 
    <img src="img/image_1.png" alt="image one" >
</button>

<div id="map_1">
    <p class="modal_content">place holder</p>
</div>

javascript jquery html css

Answer 1

Answer №1

Initially, it is important to note that custom attributes must begin with data- instead of data_ (pay attention to the dash instead of underscore).

$("#" + objective).fadeIn(300, function(){
    $("#" + objective).find(".modal_content").fadeIn(300);
});

the code above first fades in $('#map_1') and then, subsequently fades in $('#map_1 .modal'). If you only intend for one fade effect, ensure that #map_1 does not have any child elements.

Other than that, your code seems to be functioning as expected.

Answer 2

Initially, it is important to note that custom attributes must begin with data- instead of data_ (pay attention to the dash instead of underscore).

$("#" + objective).fadeIn(300, function(){
    $("#" + objective).find(".modal_content").fadeIn(300);
});

the code above first fades in $('#map_1') and then, subsequently fades in $('#map_1 .modal'). If you only intend for one fade effect, ensure that #map_1 does not have any child elements.

Other than that, your code seems to be functioning as expected.

Answer 3

Answer №2

Here is a potential solution that you might find useful:

<button class="map_flag" data-modal="map_1"> 
    <img src="img/image_1.png" alt="image one" >
</button>

<div id="map_1">
    <p class="modal_content">placeholder text here</p>
</div>

Next, in your JavaScript code:

$(".map_flag").on("click",function(){

    // Utilize the data-* attributes to retrieve values with jQuery's .data() function
    var target = $(this).data("modal");

    $("#" + target).fadeIn(300, function(){
        $("#" + target).find(".modal_content").fadeIn(300);
    });
});

Answer 4

Here is a potential solution that you might find useful:

<button class="map_flag" data-modal="map_1"> 
    <img src="img/image_1.png" alt="image one" >
</button>

<div id="map_1">
    <p class="modal_content">placeholder text here</p>
</div>

Next, in your JavaScript code:

$(".map_flag").on("click",function(){

    // Utilize the data-* attributes to retrieve values with jQuery's .data() function
    var target = $(this).data("modal");

    $("#" + target).fadeIn(300, function(){
        $("#" + target).find(".modal_content").fadeIn(300);
    });
});

Answer 5

Answer №3

My grasp on jquery skills is somewhat lacking, but is it necessary to "fade out" before fading in? [https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]

Answer 6

My grasp on jquery skills is somewhat lacking, but is it necessary to "fade out" before fading in? [https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]

Select a division and retrieve the identification of a different division

Answer №1

Answer №2

Answer №3

Similar questions

Managing User Sessions in Meteor

Disabling past dates in a React JS application with a React date picker

PHP and Bootstrap combine in this dynamic carousel featuring thumbnail navigation

Issues with Javascript Arrays not adding objects with duplicate values

Is it possible to trigger a JavaScript function by manipulating the URL of an HTML page?

TypeScript struggling to recognize specified types when using a type that encompasses various types

Excessive content in Bootstrap row extends outside browser window dimensions

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

Vue function displays 'undefined' message

Unable to conduct this search with Python using Selenium on a website

Angular routing does not properly update to the child's path

Creating square images in CSS without specifying their dimensions can easily be done by centering

Personalize PDF display using Bootstrap and CodeIgniter

Check to see if two sets of coordinates fall within the specified radius

What is the reasoning behind storing type definitions in the @types namespace within npm?

Adding a JavaScript object into the $http service

Issue with Struts 2 tag causing malfunction in validating the collection

Immediate display of collapsed/toggle menu in a Bootstrap navbar

Guidelines for showcasing validation summary on an ASP.NET webpage with the help of Javascript

The ESLint tool seems to be struggling to detect the package named "@typescript-eslint/eslint-plugin"