javascript - 鼠标松开、鼠标按下功能的更快编码

Question

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

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

代码片段:

$('#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"});
);

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

元素上使用 data-image-src 属性来实现这一点。

HTML:

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

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

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

我们也可以将我们的点击处理程序链接到我们之前的 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');
});