jQuery腳本中的變量？

所以我有一個腳本，當你mouseenter一個div，它會加載.html文件到另一個div。我想要的是讓這個腳本與許多div一起工作。我真的不想爲每個圖像編寫單獨的腳本，而是使用基於div名稱的變量。假設我有一個名爲p3的div，當我將鼠標懸停在上面時，我希望腳本加載p3.html。這裏的腳本來向你展示我的意思：jQuery腳本中的變量？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#p1').mouseenter(function() { 
     $('#description').load('descr/p1.htm'); 
    }); 
    $('#p1').mouseleave(function() { 
     $('#description').load('descr/portDefault.htm'); 
    }); 
});

任何提示將不勝感激。

來源

2013-10-21 user2660811

$（「IMG」），或使用一個類$的mouseenter ..。 – Snowburnt

我想這取決於div如何生成。我會做的是在div上設置一個屬性來表示目標HTM頁面。

喜歡的東西

<div data-targetPage='p1.htm' class='hoverImage'>stuff</div>

然後jQuery的可能看起來像這樣

$(document).ready(function() { 
    $('.hoverImage').mouseenter(function() { 
     $('#description').load($(this).attr('data-targetPage')); 
    }); 
    $('.hoverImage').mouseleave(function() { 
     $('#description').load('descr/portDefault.htm'); 
    }); 
});

編輯：更新，以反映的意見。

來源

2013-10-21 17:24:38 Smeegs

自定義屬性可以因爲你使用有效的自定義'[data - *]'屬性。您應該使用'[data-target-page]'，而不是'[targetPage]'（這是無效的），您可以使用'$（..）.data（'targetPage'）;'訪問。 – zzzzBov

已更新，以反映您的意見。 – Smeegs

我喜歡你的答案，但我仍然需要複製/粘貼很多次，因爲會有許多像＃p1這樣的div來觸發腳本，那麼是否有解決方案？因爲我不確定是否可以使用腳本觸發器的自定義屬性。 @edit哦，我想我明白了，我可以在圖像上使用class而不是id。 – user2660811

您可以添加一個公共類的所有圖像，並像這樣做：

$document).ready(function() { 
    $('.class').mouseenter(function() { 
    var id = this.id; 
    $('#description').load('descr/' + id + '.htm'); 
    }); 
    $('.class').mouseleave(function() { 
    $('#description').load('descr/portDefault.htm'); 
});

來源

2013-10-21 17:24:48 Sarcastic

試試這個：

$(document).ready(function() { 
    $('img').mouseenter(function() { 
     $('#description').load('descr/' + this.src.replace('\.png', '') + '.htm'); 
    }); 
    $('img').mouseleave(function() { 
     $('#description').load('descr/portDefault.htm'); 
    }); 
});

然而，我建議增加一些類的所有圖像，你要使用jQuery是指，像

<img class="clickableImage" src="...">

，並選擇他們是這樣的：

$('.clickableImage').mouseenter(...

來源

2013-10-21 17:24:58 matewka

你可以做的一個好處是你的圖片使用的數據屬性，如：

<img class="images" src="bleh.jpg" data-imagename="image_bleh.jpg" />

和您的JavaScript裏面你做：

$('.images').mounseenter(function(){ 
    $('#description').load('desc/'+$(this).data('imagename')); 
});

讓我知道如果你瞭解它。

來源

2013-10-21 17:25:56

你想使用對象嗎？因爲你說你不想重新編寫代碼。這裏是你將如何製作一個（取自jQuery creating objects）：

var box = {}; // my object 
var boxes = []; // my array 

$('div.test').each(function (index, value) { 
    color = $('p', this).attr('color'); 
    box = { 
     _color: color // being _color a property of `box` 
    } 
    boxes.push(box); 
});

我希望這是你在哪裏尋找。

來源

2013-10-21 17:29:58 DLJ

什麼matweka說，類似的，我將一個類添加到所有要允許懸停，只是增加一個this.attr（「ID」）來選擇P1，P2的圖像等

$(document).ready(function() { 
    $('.clickImg').mouseenter(function() { 
     $('#description').load('descr/' + this.attr('id') + '.htm'); 
    }); 
    $('.clickImg').mouseleave(function() { 
     $('#description').load('descr/portDefault.htm'); 
    }); 
});

此外，我會建議使用.hover（），而不是兩者的mouseenter和鼠標離開

例如：（「mouseoverclass」）

$(document).ready(function() { 
    $('.clickImg').hover(function() { 
     $('#description').load('descr/' + this.attr('id') + '.htm'); 
    }, function() { 
     $('#description').load('descr/portDefault.htm'); 
    }); 
});

來源

2013-10-21 17:38:54 kylecblyth

jQuery腳本中的變量？

回答

相關問題