Mouse up，Mouse down功能的更快编码

Question

我有一个jQuery函数，当用户单击文本图像描述时，该函数将图像加载到拖放区域。

我有几百张图片。我想知道是否有一种更快、更有效的方法来处理当用户点击文本时更改颜色的代码？我不是编码专家...提亚

代码片段：

$('#p1').click (function(){
loadImage("../images/myImage.png", 150, 100, '.startDropArea');
});

$('#p1').mousedown (function(){
$('#p1').css({"color":"green"});   
});
$('#p1').mouseup (function(){
$('#p1').css({"color":"black"});   
});

HTML

<div data-role="collapsible">
    <h4>Header</h4>
<p id="p1"> Start</p>

Answer 1

是的，可以用一种比为每个元素编写处理程序更有效的方式来实现这一点。首先，简单的部分-我们将向所有相关的div添加一个类，这样我们就可以一次性选择它们，并使用它来应用mousedown/mouseup处理程序。

HTML：

<div data-role="collapsible">
    <h4>Header</h4>
    <p class="image-loader" id="p1"> Start</p>
</div>

JS -请注意，我们现在使用$(this)来获取处理函数中的当前元素，并链接我们的调用，这样我们就不必重新选择这些元素：

$('.image-loader').mousedown (function(){
    $(this).css({"color":"green"});   
})
.mouseup (function(){
    $(this).css({"color":"black"});
);

单击功能需要更多的工作，因为虽然我们想要执行的操作对于每个元素都是相同的，但我们可能必须使用不同的图像源。我们将通过在我们的

元素。

HTML：

<div data-role="collapsible">
    <h4>Header</h4>
    <p class="image-loader" data-image-src="../images/myImage.png" id="p1"> Start</p>
</div>

JS:我们现在可以在点击处理程序中获得data属性，并使用它来加载适当的图像。

$('.image-loader').click (function(){
    loadImage($(this).data('image-src'), 150, 100, '.startDropArea');
});

我们还可以将click处理程序链接到之前的mouseup/mousedown处理程序上，所以我们最终的Javascript是...

$('.image-loader')
.mousedown (function(){
    $(this).css({"color":"green"});   
})
.mouseup (function(){
    $(this).css({"color":"black"});
)
.click (function(){
    loadImage($(this).data('image-src'), 150, 100, '.startDropArea');
});