jQuery Span - OnClick變化背景

-2

我需要一些jQuery，當用戶點擊跨度（這是裏面李），改變該跨度的背景圖像，並在下一次單擊，返回舊的背景圖像？jQuery Span - OnClick變化背景

$(document).ready(function() { 
    $('.inverse').click(function() { 
     if($(this).find('.inverse').attr('id') == 'yes') { 
      $(this).find('.inverse').attr('id', '').css('background-image' 'url(...)'); 
     } else { 
      $(this).find('.inverse').attr('id', 'yes').css('background-image' 'url(...)'); 
     } 
    }); 
});

而且還HTML：

   <div class="dynamic"> 
       <h3>08/25/2014 - All Events</h3> 
        <ul> 
         <li>Time<span class="inverse">Customer</span></li> 
         <li>7 PM<span class="inverse">Customer Name</span></li> 
         <li>9 PM<span class="inverse">Customer Name</span></li> 
         <li>11PM<span class="inverse">Customer Name</span></li> 
        </ul> 
</div>

我試過，但沒有奏效。

在此先感謝。

來源

2015-02-23 Peky27

這是不是一個網站「代碼這對我來說」這個問題是非常基本的，你會發現asnwer如果你搜索了一下 – DaniP 2015-02-23 13:02:45

把你已經嘗試 – M3ghana 2015-02-23 13:03:13

代碼我很抱歉如果聽起來這樣，但我已經失去了很多時間試圖找到一個適當的解決方案。 – Peky27 2015-02-23 13:03:47

你可以做的是處理類名爲（優於ID）的變化，然後檢查該類是否存在。還要注意使用報價".."和'..'設置background-image。檢查這個例子：

$(document).ready(function() { 
 
    $('.inverse').click(function() { 
 
    if (!$(this).hasClass('actin')) { 
 
     $(this).css('background','url("http://lorempixel.com/200/100/sports")'); 
 
     $(this).toggleClass('actin'); 
 
    } else { 
 
     $(this).css('background','url("http://lorempixel.com/200/100/food")'); 
 
     $(this).toggleClass('actin'); 
 
    } 
 
    }); 
 
});

span { 
 
    display: inline-block; 
 
    background: url('http://lorempixel.com/200/100/sports') no-repeat; 
 
    padding:15px; 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dynamic"> 
 
    <h3>08/25/2014 - All Events</h3> 
 
    <ul> 
 
    <li>Time<span class="inverse">Customer</span> 
 
    </li> 
 
    <li>7 PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    <li>9 PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    <li>11PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    </ul> 
 
</div>

編輯

此外，如果你僅僅指剛要處理的點擊bg你可以只添加一個類改變這種背景：

$(document).ready(function() { 
 
    $('.inverse').click(function() { 
 
     $(this).toggleClass('actin'); 
 
    }); 
 
});

.inverse { 
 
    display: inline-block; 
 
    background: url('http://lorempixel.com/200/100/sports') no-repeat; 
 
    padding:15px; 
 
    color:white; 
 
} 
 
.inverse.actin { 
 
    background: url('http://lorempixel.com/200/100/food') no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dynamic"> 
 
    <h3>08/25/2014 - All Events</h3> 
 
    <ul> 
 
    <li>Time<span class="inverse">Customer</span> 
 
    </li> 
 
    <li>7 PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    <li>9 PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    <li>11PM<span class="inverse">Customer Name</span> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2015-02-23 13:27:33 DaniP

是的，這個工作！非常感謝你！我的知識中的主要問題正是這個「還要注意使用引號」..「和」..「設置背景圖像。」 – Peky27 2015-02-23 13:35:59

Yep @ Peky27我想是在你的代碼檢查編輯一個簡單的方法來做這個變化:) – DaniP 2015-02-23 13:38:29

是的，甚至更好！再次感謝你！非常容易理解和實施像我這樣的初學者。 – Peky27 2015-02-23 13:42:28

因爲你沒有告訴我們你試過的東西，我只解釋了這個和一些有用的提示的邏輯。

首先，要捕獲jQuery中的click事件，您可以使用.click函數，該函數也具有處理程序參數。閱讀更多HERE。

因此，第一步是添加一個事件以進行跨度點擊，如$('yourspan').click(function(){});。

第二步：在上面的函數裏面，你可以編寫代碼來改變background。您可以使用.css函數與jQuery一起執行此操作。閱讀更多http://api.jquery.com/css/。使用css classes有更好的選擇。想想看。

來源

2015-02-23 13:07:11 Kosmog

jQuery Span - OnClick變化背景

回答

相關問題