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');
});

鼠标向上，鼠标按下功能的编码速度更快

1 个答案: