創建jQuery函數以減少代碼

當前我有懸停和單擊事件的單獨函數，但圖標列表正在增加，我想使所有圖標都可以使用的通用函數，但我不確定從何處開始。順便說一句，我知道我使用反剷和挖掘機src相同的圖像。創建jQuery函數以減少代碼

var excavator = false; 
var backhoe = false; 
var paver = false; 
var compactor = false; 
var motorgrator = false; 


$("#excavator").mouseleave(function() { 
    if(!excavator) 
     $(this).attr("src", "img/default_excavator.png"); 
}); 
$("#excavator").mouseenter(
    function() { 
     if(!excavator) 
     $(this).attr("src", "img/hover_excavator.png"); 
}); 
$("#excavator").click(
    function() { 
    $(this).attr("src", "img/active_excavator.png"); 
    $("#equipmentList").load('partials/excavator.php'); 
    excavator = true; 
    backhoe = false; 
    $("#backhoe").attr("src", "img/default_excavator.png"); 
}); 

/******************** end of excavator ********************/ 

$("#backhoe").mouseleave(function() { 
    if(!backhoe) 
     $(this).attr("src", "img/default_excavator.png"); 
}); 
$("#backhoe").mouseenter(
    function() { 
     if(!backhoe) 
     $(this).attr("src", "img/hover_excavator.png"); 
}); 
$("#backhoe").click(
    function() { 
    $(this).attr("src", "img/active_excavator.png"); 
    $("#equipmentList").load('partials/backhoe.php'); 
    backhoe = true; 
    excavator = false; 
    $("#excavator").attr("src", "img/default_excavator.png"); 
}); 

$('#top').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

下面

是部分從HTML

<div class="container"> 
     <div class="row-fluid"> 
      <div class="col-lg-12"> 
       <h3>Equipments</h3> 
       <div id="equipmentSelection" class="block-inline" style="margin-bottom: 1%"> 
        <img id="excavator" src="img/default_excavator.png" alt=""/> 
        <img id="backhoe" src="img/default_excavator.png" alt=""/> 
       </div> 
       <div class="panel panel-default"> 
        <div id="equipmentList" class="panel-body"> 
        <h4>Select above to browse our equipments</h4> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

來源

2015-09-27 Vishal Desai

唐真的不懂邏輯......爲什麼你必須先點擊圖片，然後才能將鼠標懸停在圖片的源代碼中？ – charlietfl

我有三個圖像爲每個按鈕，一個表示懸停，一個默認狀態，第三個表示按鈕是否被點擊，因爲點擊後它會顯示與該按鈕相關的數據 –

很容易添加一個類到點擊並在你的答案第一行改變它的風格與該類 – charlietfl

綁定的功能，以通用的容器類，並檢查你函數在當前元素的ID內：

$(".container .row-fluid .col-lg-12 img").mouseleave(function() { 
    if ($(this).attr('id') == 'excavator') 
    { 
     // DO SOMETHING HERE 
    } 

    if ($(this).attr('id') == 'backhoe') 
    { 
     // DO SOMETHING ELSE HERE 
    } 
});

來源

2015-09-27 18:52:58

我可以用$（「＃equipmentSelection」）替換。mouseleve？因爲所有圖標/按鈕都在設備選擇ID的那個div內。 –

是的，你可以，但在這種情況下，你不會知道哪個IMG被懸停 –

好吧，謝謝讓我試試看 –

創建jQuery函數以減少代碼

回答

相關問題