jQuery绑定图片点击事件并对图片进行标记

By minirplus on 2016-12-21 in DEV

实现鼠标点击网页图片后获取图片信息并对图片进行标记

被点击的图片由a元素包裹，需要获取的图片信息在alt属性内，同级的span元素下有一个input子节点是需要获取的checked标记状态

<span class="date" style="" alt="T28-478">2016-12-20 21:28:00

</span>

</div>

点击事件可以直接绑定到img元素，也可以绑定到a元素，这里通过id选择器a[id=’bigclick’]绑定到a元素，a元素需要删除href属性

$("a[id='bigclick']").click(function(){

//do something

});

获取图片的alt信息相对比较简单，只需要使用.attr()方法

1	var itemPart = $(this).attr("alt");

为了获取同级节点span下子节点input的checked属性，需要使用遍历节点方法，next()至同级节点span后，再使用children(“input”)获取span的子节点input，最后使用.prop(“checked”)获取标记状态。

1	var starStatus = $(this).next().children("input").prop("checked");

通过.getJSON方法将图片参数发送给api，api更新数据库后，返回标记状态data.star_status

$.getJSON( "ajax_star.php?itemPart="+itemPart, function( data ) {

$( "span[alt="+itemPart+"]" ).append( "updated: "+data.star_status+"");

});

通过返回值判断更新是否成功，并将标记状态通过.prop()方法更新到checkbox

if(data.star_status>0){

$(":checkbox[value='"+itemPart+"']").prop("checked",true);

}

else{

$(":checkbox[value='"+itemPart+"']").prop("checked",false);

}

并在图片下方预留span元素显示处理状态，通过.empty()方法清空之前的信息，通过.append()方法刷新内容

1	$( "span[alt="+itemPart+"]" ).children("span").empty().append( "updated: "+data.star_status+"");

总结

单引号双引号是个坑，例如 $(":checkbox[value='"+itemPart+"']") 如果这样写 $(":checkbox[value="+itemPart+"]") 是不会有任何反应的，因为字符串中间有连接字符，所以必须加单引号。

另外$(this)永远指向调用函数的那个DOM对象