JavaScript Add number to end of div with jQuery number with jquery validate,number with commas jquery,format number

I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.

Here is my jQuery:

$('#science-panel-1').hover(function(){
    $('#iphone-screen-1').addClass('active');
},function(){
    $('#iphone-screen-1').removeClass('active');
});

$('#science-panel-2').hover(function(){
    $('#iphone-screen-2').addClass('active');
},function(){
    $('#iphone-screen-2').removeClass('active');
});

$('#science-panel-3').hover(function(){
    $('#iphone-screen-3').addClass('active');
},function(){
    $('#iphone-screen-3').removeClass('active');
});

My HTML:

<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
            Content goes in here!
    </div>
    <div id="science-panel-2" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-3" class="science-panel__item">
        Content goes in here!
    </div>
</div>

<div class="col-md-4">
    div id="iphone-screen-1" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    div id="iphone-screen-2" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-3" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-4" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-5" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
    <div id="iphone-screen-6" class="iphone-screen-item">
        <img src="IMG-url-here.jpg" alt="" />
    </div>
</div>

<div class="col-md-4">
    <div id="science-panel-4" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-5" class="science-panel__item">
        Content goes in here!
    </div>
    <div id="science-panel-6" class="science-panel__item">
        Content goes in here!
    </div>
</div>

This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.

Answer:1

This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...

$("[id^=science-panel-]").hover(function() {
    // get the corresponding iphone-screen element id
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
    $(iphoneScreen).addClass("active");
},function() {
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
    $(iphoneScreen).removeClass("active");
});
Answer:2

I recommend changing the markup to include the data you need to drive the script:

<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

This allows you to select all the science panel items at once:

$('.science-panel__item')

and perform the exact same script on each of them:

$('.science-panel__item').hover(function () {
    $($(this).data('target')).addClass('active');
//    ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
    $($(this).data('target')).removeClass('active');
});

If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:

$('[data-hover-target]').hover(function () {
    $($(this).data('hoverTarget')).addClass('active');
}, function () {
    $($(this).data('hoverTarget')).removeClass('active');
});
Answer:3

Suppose I ensure that properties are deleted and objects are set to null after use in JavaScript prpgram. 1) Will this help me in better memory management? How do I verify this? 2) As far as I know,...

Suppose I ensure that properties are deleted and objects are set to null after use in JavaScript prpgram. 1) Will this help me in better memory management? How do I verify this? 2) As far as I know,...

  1. memory manager javascript

I was wondering if I can call cffunction on my cfm page? I have onClick button that should make a call to the cffunction that is on the same page. Also I have tried to put cfcomponent around my ...

I was wondering if I can call cffunction on my cfm page? I have onClick button that should make a call to the cffunction that is on the same page. Also I have tried to put cfcomponent around my ...

I am looking for a way to turn a middleware on and off. I introduced a tutorial functionality - I listen to what the user is doing with the UI by checking each action with a "guidance" middleware. if ...

I am looking for a way to turn a middleware on and off. I introduced a tutorial functionality - I listen to what the user is doing with the UI by checking each action with a "guidance" middleware. if ...

I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get ...

I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get ...