jQuery投票插件_JS图片打钩效果投票源代码
2015-09-06 12:11:47  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6192
• 1

本Demo是一款jQuery选中图片投票的Demo、并带有打钩的效果、Demo代码非常简单、不管是图片投票还是其它方式投票、改改效果应该都不错、非常实用、效果预览图片如下

HTML代码

<div class="sys_item_spec">
<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
    <dd>
        <ul class="sys_spec_img">
            <li data-aid="1">
                <a href="javascript:;"><img id="1" onClick="test(this.id)" src="img/chlidone.jpg" width="180" height="135"  /></a>
                <span>张三 票数：9089</span>
                <i></i>
            </li>
            <li data-aid="2">
                <a href="javascript:;"><img id="1" onClick="test(this.id)" src="img/chlidtwo.jpg"  width="180" height="135"  /></a>
                <span>张三 票数：9342</span>
                <i></i>
            </li>
            <li data-aid="3">
                <a href="javascript:;"><img id="1" onClick="test(this.id)" src="img/chlidtwo.jpg" width="180" height="135" /></a>
                <span>张三 票数：3254353</span>
                <i></i>
            </li>
            <li data-aid="4">
                <a href="javascript:;"><img id="1" onClick="test(this.id)" src="img/chlidtwo.jpg" width="180" height="135"  /></a>
                <span>里斯斯 <div style="display:inline">3432</div></span> 
                <i></i>
            </li>
        </ul>
    </dd>
</dl>
</div>

JS代码

$(".sys_item_spec .sys_item_specpara").each(function(){
    var i=$(this);
    var p=i.find("ul>li");
    p.click(function(){
        if(!!$(this).hasClass("selected")){
            $(this).removeClass("selected");
            i.removeAttr("data-attrval");
            $("#aaa").val("");
        }else{
            $(this).addClass("selected").siblings("li").removeClass("selected");
            i.attr("data-attrval",$(this).attr("data-aid"))
        }
    })
})

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQrrKCq 密码: 4n4k

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛