Question

我需要什么

我需要切换事件的图像。
喜欢堆栈溢出星类似的情况。

html

 <span itemprop="location"  itemscope itemtype="http://schema.org/Place">
            <div  style="display:block; float:right; width:auto; color:#7c7c7c;">


      <a href="javascript:void(0);" src="http://im.gifbt.com/images/star1_phone.png" class="favourate_dextop" id="fav'.$data[$k]['id'].'"  onClick=" favaorite(this)"></a>
                             </div>'

js code

function favorite(pointer)
        {
        $(".favourate_dextop").click(function(){
        if($(".favourate_dextop").attr("src") == "http://im.gifbt.com/images/star1_phone.png"){
        //$(pointer).closest('.evt_date').find('.favourate_dextop').attr("src", "http://im.gifbt.com/images/star1_phonehover.png");

        $(pointer).closest('.evt_date').find('.favourate_dextop').css('background-image', 'url("' + imageUrl + '")');
        alert("if");
        }
        else 
        {

        //$(pointer).closest('.evt_date').find('.favourate_dextop').attr("src", "http://im.gifbt.com/images/star1_phone.png");

        $(pointer).closest('.evt_date').find('.favourate_dextop').css('background-image', 'url("' + imageUrls + '")');

        }
        });

}

问题

我需要在点击功能fav（）时切换图像。
我面临的问题我搜索谷歌虽然我找到了toggleclass虽然它不工作以防万一。

我找到了有用的代码

    // in CSS 
            .favourate_dextop{
            background: url("http://im.gifbt.com/images/star1_phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            display: block;
            float: right;
            height: 19px;
            width: 18px;
            }

            .favourate_dextop:hover{ background: url("http://im.gifbt.com/images/star1_phonehover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

            .favourate_dextops{
            background: url("http://im.gifbt.com/images/star1_phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            display: block;
            float: right;
            height: 19px;
            width: 18px;
            }

            .favourate_dextops:hover{ background: url("http://im.gifbt.com/images/star1_phonehover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}


            // in JS
            // based on value of imageUrl, determine what class to remove and what class to add.
            $(pointer).closest('.evt_date').find('.favourate_dextop').removeClass('favourate_dextop').addClass('favourate_dextops');

此代码也无效。
只有当这个代码单击图像时才会改变背景图像一次，我需要切换图片网址。

更新代码

   <div class="evt_date"  style="overflow:hidden" style="overflow:hidden" itemscope itemtype="http://schema.org/Event">

<a href="javascript:void(0);"  class="favourate_dextop" id="fav'.$data[$k]['id'].'"  onClick=" favaorite('.$data[$k]['id'].',\''.$name_event.'\',\''.$event_city.'\',\''.$event_country.'\',\''.$event_urls.'\',this)"></a>

js code

       var  image2='http://im.gifbt.com/images/star1_phonehover.png';
       var  image1='http://im.gifbt.com/images/star1_phone.png';

       var toggle = 1;


      $('.favourate_dextop').click(function(){

       if (toggle == 1) 
       {
        alert("toggle 1");
           $('.favourate_dextop').css('background-image', 'url("' + image2 + '")');

       //$("#bg").attr('src',image2);
       toggle = 0;
       }
else {
     alert("toggle 0");
                           $('.favourate_dextop').find('.favourate_dextop').css('background-image', 'url("' + image1 + '")');

       //$("#bg").attr('src',image1);
       toggle = 1;
       }

}）;

面临的问题：

从href切换不起作用。

js fiddle：我更新了我的小提琴：一些变化：http://jsfiddle.net/48Lq3u60/20/

Answer 1

首先，你必须改进你的代码....

切换图片使用：

$("#yourImage").attr('src', 'newlink');

检查工作示例here

以此为例，您可以像这样切换图像：

NEW FIDDLE

Answer 2

你最好的选择是简化一些事情。尝试这样的事情：

HTML（并不是说你的跨度现在是一个div ...你不应该在div上包含跨度，因为这是错误的语法）：

<div itemprop="location"  itemscope itemtype="http://schema.org/Place">
    <div class="img-wrap img1">
        <div class="img-swap"></div>
    </div>
</div>

CSS：

.img-wrap {
    display: block;
    float: right;
    width: auto;
    color: #7c7c7c;
}
.img-swap {
    float: left;
    width: ENTER WIDTH OF IMAGE;
    height: ENTER HEIGHT OF IMAGE;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.img-swap.img1 {
    background-image: url('pathtoimage1');
}
.img-swap.img2 {
    background-image: url('pathtoimage2');
}

jQuery的：

jQuery('.img-wrap').click(function() { 
  jQuery(this).children('.img-swap').toggleClass('img1 img2');
});

您需要换出图像路径并输入容器的高度和宽度，但这可能是一种更简单的方法，而且更清洁。

切换图像在jquery中不起作用

2 个答案: