How to toggleClass dependent of selecting input-CodePudding

I have advanced work on my project generator of documents. It is simple. Someone write date and in document is written (e.x. name of company is used more 50 times, so this have so advantage).

select.onchange = function() {
  if (select == "firma") {
    $("#osoba_fizyczna").toggleClass('hidden', 'visibility');
    $('#firma').toggleClass('visibility', 'hidden');
  } else {
    $('#firma').toggleClass('hidden', 'visibility');
    $('#osoba_fizyczna').toggleClass('visibility', 'hidden');
  }
}

hidden {
  display: none;
}

visibility {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

CodePudding user response：

I think you're confused about a few things. First, toggleClass() doesn't take two class arguments. You'd toggle two as 'one two'. See https://api.jquery.com/toggleclass.

Then, classes are defined in CSS with dots at the front, as .hidden. Really, though, you don't even need to do that. Just use jQuery's show() and hide() methods.

Also, you need to target your select element by ID differently. You were targeting all select elements with a native JavaScript technique that wasn't quite right.

$('#select').change(function() {
  if ($(this).val() === "Firma") {
    $("#osoba_fizyczna").hide();
    $('#firma').show();
  } else {
    $('#firma').hide();
    $('#osoba_fizyczna').show();
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="osoba_fizyczna" >osoba_fizyczna</div>
<div id="firma" >firma</div>

CodePudding user response：

First, you don't have any elements in your example which would be affected by your script and show the practical outcome. So I added two elements in the snippet below which have those IDs, the second one having the "hidden" class.

Second, use select.value in your condition instead of just select

And as a third step, I'd suggest to only use one class (in my snippet the "hidden" class) and toggle the display parameter with that - if it's removed, the element will have the default block display.

And last, CSS rules for classes need to have a dot in front of the class name to be valid class selectors.

select.onchange = function() {
  if (select.value == "Firma") {
    $('#osoba_fizyczna').toggleClass('hidden');
    $('#firma').toggleClass('hidden');
  } else {
    $('#firma').toggleClass('hidden');
    $('#osoba_fizyczna').toggleClass('hidden');
  }
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" >This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

And actually, with just two option values you could write the function a lot simpler:

select.onchange = function() {
  $('#osoba_fizyczna, #firma').toggleClass('hidden');
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" >This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

CodePudding user response：

for the Javascript part, as the toggleCalss can't take two parameters I think it is better to use the addClass and removeClass functions.

select.onchange = function() {
          if ($("#select").val() == "Firma") {
            $("#osoba_fizyczna").addClass('visibility').removeClass('hidden');
            $('#firma').addClass('hidden').removeClass('visibility');
          } else {
            $("#firma").addClass('visibility').removeClass('hidden');
            $('#osoba_fizyczna').addClass('hidden').removeClass('visibility');
          }
}

For the CSS part, I just add a dot . to mention that it is a class

.hidden {
    display: none;
}

.visibility {
     display: block;
}

For the HTML part, I add Ids for the two options

<select id="select">
                <option id="osoba_fizyczna" value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
                <option id="firma" value="Firma">firma</option>
</select>