Question

我有这段代码，默认情况下突出显示绿色的选定表格单元格。

我正在寻找有三种不同颜色的三个按钮的功能，所以当我点击其中一个按钮时，默认的高亮颜色将变为所选颜色。我也在这里弄曲：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();
  });
}); //]]>

Answer 1

你可以使用javascript创建一个函数并在css中设置样式

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

只需给它一个颜色代码或状态，然后根据状态设置颜色

这是一个新手的想法，但更好的是没有什么

Answer 2

感谢您的建议。我在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部分中，只需将data-color =“COLOR”和class =“btn_colors”添加到按钮，其中COLOR是要分配给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/

在您的情况下，在您的示例中，您没有加载JQuery，也没有设置在onDomready上运行。在我的例子中没有依赖，但它应该在所有HTML之后在正文中运行，以允许浏览器完成解析。

切换高光颜色

2 个答案: