iT邦幫忙

0

以checkbox設計了一個元件
並用label去顯示(隱藏原生checkbox樣式)

我希望能達到
移入元件的時候顯示a圖片
移出時顯示b圖片
若使用者點擊則會使checked==true,並顯示c圖片
又若該元件已符合checked==true,則移入移出不會有更換圖片的動作
(維持顯示c圖片)

目前用mouseover和mouseout搭配checkbox的.prop('checked')做判斷及設定
但在使用操作上ui仍然不能照我想要的顯示
請問各位高手,該用什麼方法達成我的目標?

看更多先前的討論...收起先前的討論...
pei199520 iT邦新手 5 級 ‧ 2019-02-13 15:39:04 檢舉
剛剛試出來了...
不好意思造成大家困擾,但好像不能刪文
我把我的方法貼過來,讓大家看看是否有其他想法或可以改善的空間
這邊是用把圖片寫在css背景並用class替換的方式進行
$('#divName').on('mouseover', '.btn-checkbox+label', function () {
if (!$(this).prev().prop('checked')) {
$(this).addClass('checkbox-hover');
}
$('#divName').on('click', '.btn-checkbox+label', function () {
if (!$(this).prev().prop('checked')) {
$(this).addClass('checkbox-checked');
$(this).removeClass('checkbox-hover')
} else {
$(this).removeClass('checkbox-checked');
$(this).addClass('checkbox-hover');
}
});
});
$('#divName').on('mouseout', '.btn-checkbox+label', function () {
$(this).removeClass('checkbox-hover');
});
其實,你搞的有點複雜就是了。

如果說checkbox元件可以與img上同一盒子的話。那就簡單多了。
你可以搭配 :checked 這個css的特性來達到你想要的效果。
不需要用class操作處理。

這邊給你一個應用的方式讓你學習
https://wcc723.github.io/css/2013/10/07/css-chechbox/

再搭合hover的話就更美好了
pei199520 iT邦新手 5 級 ‧ 2019-02-13 17:11:57 檢舉
哈哈對呀,好像新手都容易把問題搞得很複雜...

我原先有嘗試過css的:checked和:hover
但我發現他們之間會互相衝突
比如我已經checked了,可是在hover的時候還是會有hover的效果
(我希望在checked之後就不要有hover效果)
所以我才想說用JQuery來控制看看

但又因為我的元件是動態生成的
所以又寫得更複雜了...
你的 hover 跟 checked其實是同效果才對。
把它放在一起就行了。

除非你要做動畫的方式。

1 個回答

3
cn41408
iT邦新手 5 級 ‧ 2019-02-13 18:04:52
最佳解答

不透過js也是可以的

[html]

<label>
  <input type="checkbox" id="test" name="test" />
  <img id="image_a"/>
  <img id="image_b"/>
  <img id="image_c"/>
</label>

[css]

input#test,
img[id^=image_] {
  display: none;
}

label:hover > 
  input#test:not(:checked) ~ img#image_a,
label:not(:hover) > 
  input#test:not(:checked) ~ img#image_b,
label > 
  input#test:checked ~ img#image_c
{
  display: block;
}
pei199520 iT邦新手 5 級 ‧ 2019-02-14 09:46:25 檢舉

哇好神奇 謝謝高手幫忙
不過我對於css還沒到達能夠如此運用自如的程度
想要深入學習的話 請問我該下什麼關鍵字找相關內容呢?
(css選擇器or???)

cn41408 iT邦新手 5 級 ‧ 2019-02-14 11:28:25 檢舉

我要發表回答

立即登入回答