Activate each division separately with a single script

Question

Activate each division separately with a single script

I am facing an issue where each blue div (

<div id="rectangle"></div>

) is not firing independently when hovered or clicked.

Currently, when I hover/click over the first one, both fire simultaneously. However, if I hover/click over the second one, neither fires.

I have tried various solutions from other sources but none seem to work with this specific code. I was hoping someone could provide me with a detailed explanation so I can learn and compare it to the methods I have already attempted.

$('.rectangle1').hide();
          $('#rectangle').on('click', function() {
            clicked = !clicked;
          });

          $('#rectangle').hover(function() {
            $('.rectangle1').slideDown()
          },function() {
            if (!clicked) {
              $('.rectangle1').slideUp()
            }
          });  
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div id="rectangle"></div>
        <div class="rectangle1"></div>

        <div id="rectangle"></div>
        <div class="rectangle1"></div>

http://jsfiddle.net/Q5cRU/99/

javascript jquery html css

Answer 1

Answer №1

One issue that arises is the duplication of the id="rectangle" attribute for two different elements. As stated on MDN:

The id global attribute specifies a unique identifier (ID) that must be distinct within the entire document.

With jQuery, only the first element bearing this ID will have event listeners added to it.

Answer 2

One issue that arises is the duplication of the id="rectangle" attribute for two different elements. As stated on MDN:

The id global attribute specifies a unique identifier (ID) that must be distinct within the entire document.

With jQuery, only the first element bearing this ID will have event listeners added to it.

Answer 3

Answer №2

It's quite simple really: The event listener was only assigned to the initial #rectangle. jQuery does not recognize multiple elements with the same #ID. Therefore, it is not recommended to use identical id attributes for different elements.

For your reference, here is what you are searching for: http://jsfiddle.net/Q5cRU/116/

$(document).ready(function() {

    $('.rectangle1').hide();

    $('.rectangle').data('clicked', false).click(function() {

       $(this).data('clicked', !$(this).data('clicked'));

    }).hover(
      function() {

        $(this).next('.rectangle1').slideDown();

      },
      function() {

          if (!$(this).data('clicked')) {

             $(this).next('.rectangle1').slideUp();

          }
      }
    );  
});

$("div.rectangle1").mouseover(function() {
  $(this).stop(true, true).show();
});

Answer 4

It's quite simple really: The event listener was only assigned to the initial #rectangle. jQuery does not recognize multiple elements with the same #ID. Therefore, it is not recommended to use identical id attributes for different elements.

For your reference, here is what you are searching for: http://jsfiddle.net/Q5cRU/116/

$(document).ready(function() {

    $('.rectangle1').hide();

    $('.rectangle').data('clicked', false).click(function() {

       $(this).data('clicked', !$(this).data('clicked'));

    }).hover(
      function() {

        $(this).next('.rectangle1').slideDown();

      },
      function() {

          if (!$(this).data('clicked')) {

             $(this).next('.rectangle1').slideUp();

          }
      }
    );  
});

$("div.rectangle1").mouseover(function() {
  $(this).stop(true, true).show();
});

Answer 5

Answer №3

When working with HTML, it is important to remember that the id attribute should be unique for each element. If you want multiple elements to share the same styling or purpose, you can use the class attribute instead. For example, if you have two divs and want them to trigger events independently, make sure to give them different ids - they cannot both be named "rectangle". Feel free to check out this resource for more information on attributes in HTML.

Answer 6

When working with HTML, it is important to remember that the id attribute should be unique for each element. If you want multiple elements to share the same styling or purpose, you can use the class attribute instead. For example, if you have two divs and want them to trigger events independently, make sure to give them different ids - they cannot both be named "rectangle". Feel free to check out this resource for more information on attributes in HTML.

Answer 7

Answer №4

HTML:

<div>
    <div class="box"></div>
    <div class="box-hover"></div>
</div>

<div>
    <div class="box"></div>
    <div class="box-hover"></div>
</div>

CSS:

.box {
   width: 140px; 
   height: 80px;
   background: #037CA9;
  margin-bottom:10px;
}

.box-hover {
   width: 140px; 
   height: 150px;
   background: red;
}

Javascript:

$(function(){

    var clicked = false;

    $('.box-hover').hide();

    $('.box').hover(
        function(){
            $(this).parent().find('.box-hover').slideDown();
        },
        function(){
            if (!clicked) {
                $('.box-hover').slideUp()
            }
        }
    );

});

Answer 8

HTML:

<div>
    <div class="box"></div>
    <div class="box-hover"></div>
</div>

<div>
    <div class="box"></div>
    <div class="box-hover"></div>
</div>

CSS:

.box {
   width: 140px; 
   height: 80px;
   background: #037CA9;
  margin-bottom:10px;
}

.box-hover {
   width: 140px; 
   height: 150px;
   background: red;
}

Javascript:

$(function(){

    var clicked = false;

    $('.box-hover').hide();

    $('.box').hover(
        function(){
            $(this).parent().find('.box-hover').slideDown();
        },
        function(){
            if (!clicked) {
                $('.box-hover').slideUp()
            }
        }
    );

});

Activate each division separately with a single script

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Something strange happening with the HTML received after making a jQuery AJAX request

Fade effect on vectorial HTML map with Javascript (mouseover)

Optimal method for linking jQuery ajax requests to transfer data

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Troubleshooting Node Commands malfunctioning following NodeJS update

Exploring data elements in a Javascript array

Integrating CP-ABE into a Node.js and blockchain initiative

I am experiencing difficulty with loading the local images stored in the /public/images directory of my React app

Creating a protected pathway using postMessage within an IFRAME for secure communication

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

Creating a conditional npm script that depends on the output of another: a step-by-step guide

Node JS post route experiencing issues with updating variables within function

The TypeScript inference feature is not functioning correctly

JS Code from a JS Fiddle failing to run in a web browser examination

Generate visual content from written text with the use of a form and store it on the

CSS lacks hover effects for smooth transitions on mouse over and mouse out

Canceling the http post request while subscribing to a service

Displaying live data from an XMLHttpRequest in a Vue component in real-time

Several purposes for eventListener Callback