與JavaScript的onclick添加類名一個div

我要實現的JavaScript像當我碰杯上的任何縮略圖（BTN-1，BTN-2和BTN-3）特定類應添加到框格設置動態。與JavaScript的onclick添加類名一個div

我的代碼：JSFiddle

document.getElementById('btn-1').onclick = function() { 
 
    document.getElementById('box').className = 'bg-1'; 
 
}

#box { 
 
    background-color: darkgray; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.thumbnail { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px solid; 
 
    margin: 5px; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#btn-1 { 
 
    background-color: red; 
 
} 
 

 
#btn-2 { 
 
    background-color: green; 
 
} 
 

 
#btn-3 { 
 
    background-color: blue; 
 
} 
 

 
.bg-1 { 
 
    background-color: red; 
 
} 
 

 
.bg-2 { 
 
    background-color: blue; 
 
} 
 

 
.bg-3 { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box"></div> 
 

 
<div class="thumbnail" id="btn-1"></div> 
 
<div class="thumbnail" id="btn-2"></div> 
 
<div class="thumbnail" id="btn-3"></div>

來源

2017-08-24 4ukh

那麼，什麼是你的問題？什麼不是專門工作的？ – scrappedcola

代替帶班的煩心事，用一個簡單的data-屬性，如：data-bg="#f00"

$('[data-bg]').css('background', function() { 
 
    $(this).on('click',() => $('#box').css('background', this.dataset.bg)); 
 
    return this.dataset.bg; 
 
});

#box { 
 
    background: darkgray; 
 
    width: 120px; height: 120px; 
 
} 
 

 
[data-bg] { 
 
    width: 30px; height: 30px; 
 
    margin: 5px; 
 
    float: left; 
 
}

<div id="box"></div> 
 
<div data-bg="red"></div> 
 
<div data-bg="#00f"></div> 
 
<div data-bg="rgb(255,0,180)"></div> 
 
<div data-bg="linear-gradient(to right, #E100FF, #7F00FF)"></div> 
 

 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

來源

2017-08-24 22:24:12

我如何使用漸變色與[數據彩]？因爲我試過但它不工作！我的漸變顏色：背景：＃7F00FF; /*回退舊的瀏覽器*/ 背景：-webkit線性梯度（向右，＃E100FF，＃7F00FF）; /*鉻10-25時，Safari 5.1-6 */ 背景：線性梯度（向右，＃E100FF，＃7F00FF）; /* W3C，IE 10 +/EDGE，火狐16 +，Chrome瀏覽器26+，歌劇12 +，Safari瀏覽器7+ */ – 4ukh

@ 4ukh那樣簡單......看到我的編輯答案:) –

你的JavaScript工作，但你的CSS不是。

您需要添加！重要如下，以.bg-1，.bg-2和.bg-3

.bg-1 { 
    background-color: red !important; 
}

否則，ID造型正在採取優先於類造型

你可以看到正在添加的類名，如果你右鍵點擊灰色div並選擇Chrome中的檢查元素。

來源

2017-08-24 22:15:15 TripWire

你想使用jquery .addClass（）函數：

$('.myButton').addClass('myNewClass');

功能可能會是這個樣子：

$(function() { 
    $('.thumbnail').click(function() { 
     $('#box').addClass($(this).attr('id')); 
    }); 
})

來源

2017-08-24 22:18:10

你可以得到所有的縮略圖作爲一個數組，然後遍歷數組並動態添加一個事件監聽器給每個，這將添加所需的className到框中單擊時：

var thumbnails = document.getElementsByClassName('thumbnail'); 

Array.from(thumbnails).forEach(function(thumbnail) { 
    var id = thumbnail.id; 
    thumbnail.addEventListener('click', function() { 
     document.getElementById('box').className = id.replace('btn', 'bg') 
    }); 
});

來源

2017-08-24 22:18:57

你缺少括號... –

比較遺憾的是，它現在固定 –

與JavaScript的onclick添加類名一個div

回答

相關問題