Creating the same event for two different elements in jQuery (not for each of them for both!)

Question

I would like to create a switch event for 2 different TDs in my table row. the event should show / hide the next row of the table.

<table>
    <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td class="clickable1">6</td> <td class="clickable2">7</td>
    </tr>
    <tr>
        <td>this row should be toggled between show/hide once one of the clickable TDs were clicked</td>
    </tr>
</table>

Here is the code I tried to apply, but it applied each of the classes to the event:

$('.clickable1,.clickable2').toggle(function() {
    $(this).parent()
       .next('tr')
       .show();
}, function() {
$(this).parent()
       .next('tr')
       .hide();
});

One more thing: I use the psuedo class on every TR CSS hover. How can I distinguish two TRs (for example, the hover effect on two of them)?

Here is what I found to be working so far:

$('.clickable1,.clickable2').click(function() {
   $(this).parent()
          .next('tr')
          .toggle();
});

TR seems to remember this previous state with the toggle command!

Answer 1

Thanks everyone for the answers! here is what i found to be working so far:

$('.clickable1,.clickable2').click(function() {
                       $(this).parent()
                              .next('tr')
                              .toggle();
});

Answer 2

, , . toggleClass "hover".

$('.clickable1,.clickable2').click(function() {
     var parent = $(this).parent();
     parent.toggleClass('hovered');

     var next = parent.next('tr');
     next.toggle().toggleClass('hovered');
});

Answer 3

, .

jQuery delegate(), , toggle.

$('tr:has([class^=clickable])').toggle(function(e) {

        // Verify that the target had a clickable class
    if($(e.target).closest('[class^=clickable]').length ) {

            // No need to call .parent() since the handler is now on the <tr>
        $(this).next('tr').show();
    }
},
function(e) {

        // Verify that the target had a clickable class
    if($(e.target).closest('[class^=clickable]').length ) {

            // No need to call .parent() since the handler is now on the <tr>
        $(this).next('tr').hide();
    }
});

.

$('.clickable1').toggle(function() {
        $(this).parent()
           .next('tr')
           .show();
    }, function() {
    $(this).parent()
           .next('tr')
           .hide();
    });

$('.clickable2').click(function() {
    $(this).prev().click();     // Fires the click event for its previous sibling
});

---

.

$('tr:has([class^=clickable]):even').hover(
  function() {
      $(this).addClass('hilite')
      .next().addClass('hilite');
  },
  function() {
      $(this).removeClass('hilite')
      .next().removeClass('hilite');

});

Answer 4

jsFiddle , . , clickable1 clickable2 , - . , . , jsFiddle :

HTML:

<table id="table">
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td class="clickable">6</td> <td class="clickable">7</td>
</tr>
<tr class="toggleVis"><td colspan="7">this row should be toggled between show/hide once one of the clickable TDs were clicked</td></tr>
</table>​

CSS

.clickable{cursor:pointer;}
.hide{display:none;}
.hover{font-weight:bold;border:solid 1px blue;background-color:yellow;}​

JQuery

$(".clickable").click(function() {
    $(".toggleVis").toggleClass("hide");
});
$('tr', "#table").hover(
    function() {
        $(this).toggleClass("hover");
    },
    function() {
        $(this).toggleClass("hover");
    });

Answer 5

?

$('.clickable1,.clickable2').click(function(e){
    var nTR=$(e.target).parent().next('tr');
    if (nTR.css("display")!="none") nTR.hide();
    else nTR.show();
});​​​​​​

, .

psuedo- TRs, , . , :

$("tr").hover(function(){
  $(this).next('tr').andSelf()
     .css("backgroundColor","#F00");},
  function(){$(this).next('tr').andSelf()
     .css("backgroundColor","#FFF");
});