0

What script should I use to create a clickable selection/deselection function to change the font color for a large set of different elements? I don't have too much experience with web development. This is probably trivial to implement, but I don't know where to start or what the best solution might be. I hope my use case is reasonably clear. The code might look something like this:

<!-- CSS -->

.selection {
  color: #E5E5E5;
}

<!-- HTML -->

<element selector="k1">Select/Deselect Keyword 1</element>
<element selector="k2">Select/Deselect Keyword 2</element>

<p class="k1">Keyword 1</p>
<p class="k2">Keyword 2</p>
<p class="k2">Keyword 2</p>

<!-- JS -->

var array=[];
$('element').click(function() {
  $(this).toggleClass('selection');
  $var selection=$(this).attr('selector')
  if($(this).hasClass('selection');
    ...
  $('.k1')...
  $('.k2')...
}
etherpunk
  • 33
  • 8
  • Are you asking about color-changing with jQuery? If so, it's explained here: https://stackoverflow.com/questions/2001366/how-can-i-change-the-text-color-with-jquery – GalAbra Jan 10 '18 at 10:55
  • 1
    A class to toggle is indeed a good idea to easily implement this. Be careful though, your color in your css is not correct. Hex values need to be started with a hash sign `color: #E5E5E5;` – Axnyff Jan 10 '18 at 10:55
  • 1
    Isn't it also called pound in US English? Anyway, I will fix, it will be clearer – Axnyff Jan 10 '18 at 10:59
  • 1
    @Axnyff well you learn something new everyday :) – Pete Jan 10 '18 at 11:01

1 Answers1

0

A bit tedious, but I worked out a solution (JSFiddle):

<!-- JS -->

$(function() {
    $('k1-x').click(function() {
        $('.k1-y, .k1-x').toggleClass('k1-y k1-x');
    });
    $('k2-x').click(function() {
        $('.k2-y, .k2-x').toggleClass('k2-y k2-x');
    });
});

<!-- CSS -->

.selector {
  cursor: pointer;
}

.selections {
  color: red;
}

.k1-y, .k2-y {
  color: blue;
}

<!-- HTML -->

<div class="selector">
  <k1-x>Toggle Keyword 1</k1-x>,
  <k2-x>Toggle Keyword 2</k2-x>
</div>
<br>
<div class="selections">
  <span class="k1-x">Keyword 1</span>,
  <span class="k2-x">Keyword 2</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
etherpunk
  • 33
  • 8