How about using a JQuery variable?

Question

How about using a JQuery variable?

I'm a beginner in jQuery and I have this code snippet that displays a div when a specific link on a map is hovered over:

<div id="locationmap">
    <a class="linkhide" id="link1" href="#">Occupier 1</a>
    <a class="linkhide" id="link2" href="#">Occupier 2</a>
    <a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>  
<div id="mapdetail">
    <div class="hideme" id="local1" style="display:none;">
        <p>Some content one</p>
    </div>
    <div class="hideme" id="local2" style="display:none;">
        <p>Some content two</p>
    </div>
    <div class="hideme" id="local3" style="display:none;">
        <p>Some content three</p>
    </div>    
</div>

<script type='text/javascript'>//<![CDATA[
    $("#link1, #link2, #link3").mouseover(function() { 
      var num = $(this).attr('id').replace("link",'');
      $("#local"+num).fadeIn(500); 
    });

    $(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>

Is there a way to optimize the repeated .fadeIn(500) for each link?

Here's my JSfiddle: http://jsfiddle.net/karlgoldstraw/4NRY7/

Thanks.

javascript jquery css show-hide

Answer 1

Answer №1

function displayBox(id) {
    return function() { $("#box" + id).show(500); }
}

 $("#hoverLink").mouseover(displayBox(1));

Answer 2

function displayBox(id) {
    return function() { $("#box" + id).show(500); }
}

 $("#hoverLink").mouseover(displayBox(1));

Answer 3

Answer №2

To simplify the connection between the links and the div, consider using data-attributes...

<a data-index="3"...

$('a.linkshow').mouseover(function() {
  var element = '#element' + $(this).data('index');
  $(element).fadeIn(500);
});

Answer 4

To simplify the connection between the links and the div, consider using data-attributes...

<a data-index="3"...

$('a.linkshow').mouseover(function() {
  var element = '#element' + $(this).data('index');
  $(element).fadeIn(500);
});

Answer 5

Answer №3

While the existing answers are valid, I wanted to offer my solution that utilizes the link itself to determine what content to display. By creating a JavaScript function that reads the hash value of the link, you can use it as a selector for displaying content with fade-ins. This approach also ensures graceful degradation for users with disabled JavaScript, as the hash link will still direct them to the correct content.

JavaScript

var fade = function(){
    var contentSelector = this.hash;
    $(contentSelector).fadeIn(500);
};

Then set up the mouseovers:

$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);

Alternatively, you could simplify by using:

$(".linkhide").mouseover(fade);

Add the corresponding links in the HTML:

<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>

And so on...

Check out the demonstration on JSFiddle - http://jsfiddle.net/4NRY7/11/

Answer 6

While the existing answers are valid, I wanted to offer my solution that utilizes the link itself to determine what content to display. By creating a JavaScript function that reads the hash value of the link, you can use it as a selector for displaying content with fade-ins. This approach also ensures graceful degradation for users with disabled JavaScript, as the hash link will still direct them to the correct content.

JavaScript

var fade = function(){
    var contentSelector = this.hash;
    $(contentSelector).fadeIn(500);
};

Then set up the mouseovers:

$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);

Alternatively, you could simplify by using:

$(".linkhide").mouseover(fade);

Add the corresponding links in the HTML:

<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>

And so on...

Check out the demonstration on JSFiddle - http://jsfiddle.net/4NRY7/11/

Answer 7

Answer №4

This method does not require any changes to the HTML code. By simply altering the link's ID, you could significantly enhance its efficiency.

$(".linkhide").mouseover(function() {
    var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
    var contentBox =$(this).attr('id').replace('link','');
    $("#content" + linkDivMap[contentBox] ).fadeIn(500);
});

$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });

Answer 8

This method does not require any changes to the HTML code. By simply altering the link's ID, you could significantly enhance its efficiency.

$(".linkhide").mouseover(function() {
    var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
    var contentBox =$(this).attr('id').replace('link','');
    $("#content" + linkDivMap[contentBox] ).fadeIn(500);
});

$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });

Answer 9

Answer №5

Enhanced code for improved functionality.

With this updated script, you can streamline your dynamic function usage and simplify the jQuery.mouseover() call across all .linkhide elements. This eliminates redundant code while building upon @MikeThomsen's initial solution.

$( document ).ready( function () {

  $( ".linkhide" ).mouseover( function ( event ) {

    var item_id = this.id.match( /([0-9]+)$/ )[1];

    $( "#local" + item_id ).fadeIn( 500 );

  } );


  $( ".linkhide" ).mouseout( function () {

      $( ".hideme" ).css( 'display', 'none' );

  } );

} );

Answer 10

Enhanced code for improved functionality.

With this updated script, you can streamline your dynamic function usage and simplify the jQuery.mouseover() call across all .linkhide elements. This eliminates redundant code while building upon @MikeThomsen's initial solution.

$( document ).ready( function () {

  $( ".linkhide" ).mouseover( function ( event ) {

    var item_id = this.id.match( /([0-9]+)$/ )[1];

    $( "#local" + item_id ).fadeIn( 500 );

  } );


  $( ".linkhide" ).mouseout( function () {

      $( ".hideme" ).css( 'display', 'none' );

  } );

} );

How about using a JQuery variable?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Obtain the URL of the chosen file from the input file in an HTML/AngularJS framework

Swapping out ChildNode data for HTML elements

Issues with Bootstrap Table Column Widths not Adjusting Properly

Ways to transfer information among Angular's services and components?

Angular 2 orderByPipe not displaying any results initially

AngularJS: The blend of bo-bind, bindonce, and the translate filter

Pause the execution of an AJAX callback function after numerous AJAX requests

The setting of background-size: cover does not affect the height of the background image

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

What is the method to invoke a function within another function in Angular 9?

Navigation bar in HTML positioned on the right side of the webpage

Ways to adjust a column width to be equal to the full width

Is it possible to retrieve the chosen options text from a select menu using jQuery with the feature of "Dynamic option values"?

Tips for integrating Redux toolkit with the latest version of Next.js

Error: The function pajinate is not defined for jQuery([...])

Issue with Magento: Unable to execute dataflow profiles due to Ajax Error (Uncaught TypeError: e is not a function)

Detecting attribute changes in AngularJS directivesGuide to detecting changes in attributes within Angular

Having difficulty accessing data in a JavaScript file within Odoo 9 platform

Switching downlink to top link when scrolling downwards

Loading screen featuring symbol percentage