如何結合這些懸停功能

我有很多跨度，我需要組來改變不透明度後懸停，他們都需要有唯一的ID，有沒有辦法將所有這些懸停功能合併到一個功能？如何結合這些懸停功能

jQuery的

//09  
    $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').hover(
     function() { 
      $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_09_242a, #c_09_242b').hover(
     function() { 
      $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_09_245a, #c_09_245b').hover(
     function() { 
      $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_09_246a, #c_09_246b').hover(
     function() { 
      $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','0'); 
    }); 

    //08  
    $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').hover(
     function() { 
      $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_08_236a, #c_08_236b').hover(
     function() { 
      $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_08_239a, #c_08_239b').hover(
     function() { 
      $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_08_240a, #c_08_240b').hover(
     function() { 
      $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','0'); 
    }); 

    //07  
    $('#c_07_227a, #c_07_227b').hover(
     function() { 
      $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_07_228a, #c_07_228b, #c_07_228c').hover(
     function() { 
      $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_07_007a, #c_07_007b').hover(
     function() { 
      $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','0'); 
    }); 
    $('#c_07_008a, #c_07_008b').hover(
     function() { 
      $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','1'); 
     }, 
     function() { 
      $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','0'); 
    });

HTML

<div id="rzuty09p" class="rzuty"> 
      <span id="c_09_241a" class="mieszkanie" title=""></span> 
      <span id="c_09_241b" class="mieszkanie" title=""></span> 
      <span id="c_09_241c" class="mieszkanie" title=""></span> 
      <span id="c_09_241d" class="mieszkanie" title=""></span> 
      <span id="c_09_242a" class="mieszkanie" title=""></span> 
      <span id="c_09_242b" class="mieszkanie" title=""></span> 
      <span id="c_09_243" class="mieszkanie" title=""></span> 
      <span id="c_09_244" class="mieszkanie" title=""></span> 
      <span id="c_09_245a" class="mieszkanie" title=""></span> 
      <span id="c_09_245b" class="mieszkanie" title=""></span> 
      <span id="c_09_246a" class="mieszkanie nie" title=""></span> 
      <span id="c_09_246b" class="mieszkanie nie" title=""></span> 
     </div> 

<div id="rzuty08p" class="rzuty"> 
      <span id="c_08_235a" class="mieszkanie" title=""></span> 
      <span id="c_08_235b" class="mieszkanie" title=""></span> 
      <span id="c_08_235c" class="mieszkanie" title=""></span> 
      <span id="c_08_235d" class="mieszkanie" title=""></span> 
      <span id="c_08_236a" class="mieszkanie nie" title=""></span> 
      <span id="c_08_236b" class="mieszkanie nie" title=""></span> 
      <span id="c_08_237" class="mieszkanie" title=""></span> 
      <span id="c_08_238" class="mieszkanie" title=""></span> 
      <span id="c_08_239a" class="mieszkanie" title=""></span> 
      <span id="c_08_239b" class="mieszkanie" title=""></span> 
      <span id="c_08_240a" class="mieszkanie" title=""></span> 
      <span id="c_08_240b" class="mieszkanie" title=""></span> 
     </div>  

<div id="rzuty07p" class="rzuty"> 
      <span id="c_07_226" class="mieszkanie" title=""></span> 
      <span id="c_07_227a" class="mieszkanie" title=""></span> 
      <span id="c_07_227b" class="mieszkanie" title=""></span> 
      <span id="c_07_228a" class="mieszkanie" title=""></span> 
      <span id="c_07_228b" class="mieszkanie" title=""></span> 
      <span id="c_07_228c" class="mieszkanie" title=""></span> 
      <span id="c_07_229" class="mieszkanie nie" title=""></span> 
      <span id="c_07_005" class="mieszkanie" title=""></span> 
      <span id="c_07_006" class="mieszkanie" title=""></span> 
      <span id="c_07_007a" class="mieszkanie nie" title=""></span> 
      <span id="c_07_007b" class="mieszkanie nie" title=""></span> 
      <span id="c_07_008a" class="mieszkanie" title=""></span> 
      <span id="c_07_008b" class="mieszkanie" title=""></span> 
     </div>

來源

2012-08-16 gidzior

添加一個通用類的'span's需要同樣的效果，使jQuery的selectorwith這門課嗎？ – Hidde 2012-08-16 12:42:18

$（「。rzuty> span」）。each（...）？ – dizpers 2012-08-16 12:43:59

THX馬特，我們有最終的答案

var ids = [ 
    "#c_07_227a, #c_07_227b", 
    "#c_07_228a, #c_07_228b, #c_07_228c" 
    // add more here 
]; 

ids.forEach(function(i) { 
    $(i).hover(function() { 
     $(i).stop(true, true).css('opacity', '1'); 
    }, function() { 
     $(i).stop(true, true).css('opacity', '0'); 
    }); 
});

來源

2012-08-16 13:08:50 gidzior

爲什麼循環？ '$（ids.join（'，'））。hover'就足夠了...... – David 2012-08-16 15:15:45

您可以使用this攜帶觸發事件的元素最jQuery的事件處理程序內。嘗試類似：

$('.rzuty>span').hover(function() { 
    $(this).stop(true, true).css('opacity',1); 
}, function() { 
    $(this).stop(true, true).css('opacity',0); 
});

或者，如果您希望更具體，請添加一個類並在選擇器中使用它。

來源

2012-08-16 12:44:53 David

你有三個選擇：

使用你的類作爲selctor：

$('.mieszkanie').hover(
    function() { 
     $(this).stop(true, true).css('opacity','1'); 
    }, 
    function() { 
     $(this).stop(true, true).css('opacity','0'); 
});

添加所有的ID在同一個選擇：

$('#c_09_245a, #c_09_245b, #c_09_246a, #c_09_246b, #c_09_247a, #c_09_247b').hover(
    function() { 
     $(this).stop(true, true).css('opacity','1'); 
    }, 
    function() { 
     $(this).stop(true, true).css('opacity','0'); 
});

取2個執行所需操作來減少代碼的函數：

function show() { 
    $(this).stop(true, true).css('opacity','1'); 
} 

function hide() { 
    $(this).stop(true, true).css('opacity','0'); 
} 

$(selector).hover(show, hide);

來源

2012-08-16 12:47:26 Hidde

@Robert K，謝謝，我不知道。我已經在格式化:)努力了。 – Hidde 2012-08-16 12:52:17

沒問題;我看了看文檔，看看是否可能 - 並且看，...;） – 2012-08-16 13:57:14

如何結合這些懸停功能

回答

相關問題