切換突出顯示的顏色

-1

我有這個代碼默認情況下突出顯示所選表格單元的綠色。切換突出顯示的顏色

我正在尋求幫助，其中將有三種不同顏色的三個按鈕，所以當我單擊其中一個按鈕時，默認的高光顏色將更改爲所選顏色。我也在這裏撥弄：https://jsfiddle.net/eLb9x2pp/ 任何幫助將不勝感激，我不是很熟悉JavaScript。

HTML：

<div id="Content"> 

    <div class="column"> 
    <div>20</div> 
    <div>60</div> 
    </div> 
    <div class="column"> 
    <div>72</div> 
    <div>71</div> 
    </div> 
    <div class="column"> 
    <div>88</div> 
    <div>87</div> 
    </div> 
    <div class="column"> 
    <div>64</div> 
    <div>53</div> 
    </div> 
    <div class="column"> 
    <div>90</div> 
    <div>79</div> 
    </div> 
    <div class="column"> 
    <div>54</div> 
    <div>73</div> 
    </div> 
    <div class="column"> 
    <div>74</div> 
    <div>63</div> 
    </div> 
    <div class="column"> 
    <div>98</div> 
    <div>57</div> 
    </div> 
    <div class="column"> 
    <div>74</div> 
    <div>63</div> 
    </div> 
</div>

CSS：

.column { 
    float: left; 
} 

.selectedCell { 
    background-color: #3ADF00; 
} 

.column div { 
    border: 1px solid #000; 
    padding: 4px; 
    margin: 2px; 
    width: 15px; 
    height: 15px; 
    text-align: center; 
    cursor: pointer; 
}

的Javascript：

$(window).load(function() { 
    function update_counts() { 
    $('#status').html(''); 
    $('.column').each(function(index) { 
     $('#status').html($('#status').html() + $(this).find('.selectedCell').length + ' selected cells in column ' + (index + 1) + '<br />'); 
    }); 
    } 

    $('.column div').click(function() { 
    // Add or remove class 
    $(this).toggleClass('selectedCell'); 
    // Update the class counts 
    update_counts(); 
    }); 

    // Run the function on domready 
    $(function() { 
    update_counts(); 
    }); 
}); //]]>

來源

2017-09-05 user761065

使用document.ready函數而不是window.load，它將在小提琴中工作。請參閱https://jsfiddle.net/16f5axmp/4/ – saravanakumar

謝謝@saravanakumar。是的，它現在有效。 – user761065

感謝您的建議。我在daniweb.com上得到了我的答案。這就是：

你可以使用普通的JavaScript：

// variables 
var buttons = document.getElementsByClassName('btn_colors'); 
var numbers = document.querySelectorAll('.column > div'); 
var current_color = document.getElementById('green').getAttribute('data-color'); 
// listener for button clicks 
for (let i = 0, c = buttons.length; i < c; i++) 
    buttons[i].addEventListener('click', set_color, { 
    passive: false 
    }); 
// listener for number cells 
for (let i = 0, c = numbers.length; i < c; i++) 
    numbers[i].addEventListener('click', set_bg, { 
    passive: false 
    }); 
// functions 
function set_color(event) { 
    event.preventDefault(); 
    current_color = this.getAttribute('data-color'); 
} 
function set_bg(event) { 
    if(this.classList.contains('clicked')) 
    { 
    this.classList.remove('clicked'); 
    this.style.backgroundColor = 'transparent'; 
    return ; 
    } 
    this.style.backgroundColor = current_color; 
    this.classList.add('clicked'); 
}

而在HTML部分僅僅添加數據色= 「COLOR」和class = 「btn_colors」的按鈕，其中的顏色是名稱或代碼分配給backgroundColor屬性：

<p> 
    <input class="btn_colors" data-color="#007FFF" type="button" name="blue" id="blue" value="Blue" /> 
    <input class="btn_colors" data-color="#F2B400" type="button" name="yellow" id="yellow" value="Yellow" /> 
    <input class="btn_colors" data-color="#66B447" type="button" name="green" id="green" value="Green" /> 
</p>

活生生的例子：https://jsfiddle.net/tsLgtzkv/

在你的情況，你的榜樣你是不是n加載JQuery，而不是設置在onDomready上運行。在我的示例中沒有依賴項，但它應該在所有HTML之後的正文中運行，以允許瀏覽器完成解析。

來源

2017-09-07 22:00:28 user761065

你可以做一個功能和使用JavaScript

function changeHiglight(someColorCode){ 
    var yourItem = document.getElementyById("urItemId"); 
    yourItem.style.background-color = someColorCode; 
}

設置的樣式在CSS

只是給它一個顏色代碼或狀態，並根據狀態

以及它的一個新秀的想法設置顏色，但更好然後什麼

來源

2017-09-05 20:53:46 cmprinho

謝謝。 @cmprinho我會嘗試。 – user761065

我在小提琴中做了這個。 https://jsfiddle.net/r94m7o8c/現在突出顯示不工作。你能指導我在哪裏做錯了嗎？請。謝謝。 – user761065

切換突出顯示的顏色

回答

相關問題