使用jQuery查找

是否可以將「.preview-inner」的背景顏色從「#change_color」更改爲黃色？使用jQuery查找

<div id = "form-container> 
    <input class="color-picker" id="change_color" type="text"> 
    <div class="replacer"> 
    <div class="preview"> 
     <div class="preview-inner" style="background-color: white">

我已經試過這樣：

$('#change_color').find('.preview-inner').css('background-color', 'yellow')

但這並沒有工作。

注：我使用的是插件，因此不能安排#change_color是「.replacer」

任何想法的一個真正的父母？

來源

2014-09-21 user3007294

爲什麼從'＃change_color'？ – underscore 2014-09-21 00:49:35

因爲插件的工作方式，背景顏色實際上被操縱到輸入中。（spectrum.js） – user3007294 2014-09-21 00:51:59

爲了解決您的問題，您需要選擇父級，然後使用您的查找。現在你正在選擇一個沒有孩子的元素，並尋找一個特定的孩子，這是行不通的。

試試這個：

$('.replacer').find('.preview-inner').css('background-color', 'yellow')

或者你可以試試這個：

$('#form-container').find('.preview-inner').css('background-color', 'yellow')

jQuery的長相找到您所選擇的元素的孩子。我已經創建了一個小提琴來展示這個例子。

http://jsfiddle.net/g2295Lah/

您可能還需要確保你有jQuery的文件準備功能，如果您的代碼加載在你的HTML之前。

來源

2014-09-21 00:48:47

opps，對不起。感謝您指出了這一點。我更新了選擇器。它仍然.preview-inner – user3007294 2014-09-21 00:50:44

我編輯了我的回覆，請查看，讓我知道如果有幫助。 – 2014-09-21 01:00:27

有可能

<div id = "form-container"> 
    <input class="color-picker" id="change_color" type="text"> 
    <div class="replacer"> 
    <div class="preview"> 
     <div class="preview-inner" style="background-color: white; height: 50px; width: 200px;"> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
<script> 
jQuery(document).ready(function(){ 
jQuery('#change_color').parent().find('.preview-inner').css('background-color', 'yellow'); 
}); 
</script>

我指定的div的寬度和高度，所以你可以看到的顏色改變，因爲如果你只是定義了一個空div沒有尺寸和內容，你不能看到它。

http://jsfiddle.net/L16kpksz/

來源

2014-09-21 01:03:56 andrex

輸入永遠不會成爲一個真正的父嵌套的div。你應該選擇.preview-inner與一個正常的選擇器$('.preview-inner').css('background-color', 'yellow')如果你使用farbtastic然後我建議你看看他們的演示，因爲你沒有得到它如何工作的把握。 http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

來源

2014-09-21 01:04:31

感謝羅素。這個解決方案的問題是有10多個'.preview-inner'，我不希望它們都變成黃色。我只是上面的一個輸入，我認爲這是不可能的。 – user3007294 2014-09-21 01:24:46

另外，我使用的是spectrum.js（不是farbtastic） – user3007294 2014-09-21 01:25:46

然後，您需要先獲取兄弟姐妹的父母，然後從那裏進行查找。您不會通過輸入選擇器找到它。祝你好運！ – 2014-09-21 01:51:20

使用jQuery查找

回答

相關問題