CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bay_bay
bay_bay

Reputation: 15

jQuery Function to point to two separate divs

I have the below sample code that isn't working. The user has to be able to hover over "Div 1" and/or "Div2" and a red border appear all the way around it on both (so around Div 1 AND Div 2). In my complex code within a WordPress theme, the elements cannot be nested, otherwise I could use simple CSS to get that accomplished.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>    

<body>
    <div class="attachment-shop_catalog">Div 1</div>
    <div class="title-wrapper">Div 2</div>
</body>

<script>

$(document).ready(function() {
   $('.attachment-shop_catalog .title-wrapper').hover(function() {
   $(this).css('border', '1px solid red');
   },function() {
   $(this).css('border', '0');
   });
});

</script>

</html>

CSS (external stylesheet):

.attachment-shop_catalog {
    background-color: grey;
    border: 1px solid #000;
    border-bottom: none;
    padding: 10px 20px 10px 20px;
    width: 80px;
 }

.title-wrapper {
    border: 1px solid #000;
    padding: 40px 20px 40px 20px;
    width: 80px;
}

Here are images of the live site where the red border has to appear, but on both elements all at once, not separate like in these screenshots)

Bottom Border Image 1 Top Border Image 2

Any help to fix this code will be greatly appreciated. Thanks in Advance! :)

Upvotes: 0

Views: 733

Answers (3)

Roamer-1888
Roamer-1888

Reputation: 19288

Assumption: The DOM is structured such that $('.attachment-shop_catalog') and $('.title_wrapper') are congruent (ie. both elements of the same index form a pair), regardless of the physical juxtapositions of pairs with respect to each other.

If this assumption holds, then it seems reasonable that it will hold in the long-term (ie. that it will survive detailed changes to WordPress's DOM content/structure), and you can write your javascript as follows :

$(document).ready(function() {
    var pair = '_hover_binding_'; // a unique, arbitrary string

    // First form a 2-way binding between the two elements of each pair ...
    $('.attachment-shop_catalog').forEach(function() {
        // 1. make a jq object containing `this` and its partner, forming a "pair".
        var $pair = $('.title-wrapper').eq($('.attachment-shop_catalog').index(this)).add(this);
        // 2. bind $pair to both members of the pair.
        $pair.data(pair, $pair);
    })
    // ... then attach hover handlers that act on both members of each pair (self and partner).
    .add('.title-wrapper').hover(function() {
        $(this).data(pair).css('border', '1px solid red');
    }, function() {
        $(this).data(pair).css('border', '0');
    });
});

With help from the comments, the overall process should be pretty simple to follow, though it does require a solid understanding of jQuery basics.

And as it turns out, the original assumption is not fundamental to this approach. Any reliable pairing rule at step 1, var $pair = ..., will give you a workable solution.

Upvotes: 0

Barmar
Barmar

Reputation: 782105

For binding the handler, you need to use comma to select either element. Space in a selector means that the second class must be a descendant of the first.

And if you want to put a single box around both DIVs, not each DIV by itself, you need to wrap them in another DIV.

$(document).ready(function() {
  $('.attachment-shop_catalog, .title-wrapper').hover(function() {
    $(this).closest(".container").css('border', '1px solid red');
  }, function() {
    $(this).closest(".container").css('border', '0');
  });
});
.attachment-shop_catalog {
    background-color: grey;
    border: 1px solid #000;
    border-bottom: none;
    padding: 10px 20px 10px 20px;
    width: 80px;
 }

.title-wrapper {
    border: 1px solid #000;
    padding: 40px 20px 40px 20px;
    width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="attachment-shop_catalog">Div 1</div>
  <div class="title-wrapper">Div 2</div>
</div>

Upvotes: 0

Loveen Dyall
Loveen Dyall

Reputation: 834

$(document).ready(function() {
   $('.attachment-shop_catalog, .title-wrapper').hover(function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '1px solid red');
   },function() {
   $('.attachment-shop_catalog, .title-wrapper').css('border', '0');
   });
});

Try this. the selector selects both divs to place/remove border now.

Upvotes: 1

Related Questions