Изменить свойство CSS JQuery

119

28 декабря 2020, 17:10

    <div class="radio">
        <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br>
        <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label>
    </div>
    <div data-share--audio--top="1" style="display:none">
      На своей стене
    </div>
    <div data-share--audio--top="2" style="display:none">
      В личном сообщении
    </div>

Как изменить свойство CSS display:none у data-share--audio--top на display:block на основе выбранной кнопки?

Answer 1

$('input[name="share--audio--top"]').on('change', function() { 
  var v = this.getAttribute('value'); 
  $('div[data-share--audio--top]').each(function() { 
    this.style.display=this.getAttribute('data-share--audio--top') === v?'block':'none'; 
  }) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="radio"> 
    <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br> 
    <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label> 
</div> 
<div data-share--audio--top="1" style="display:none"> 
  На своей стене 
</div> 
<div data-share--audio--top="2" style="display:none"> 
  В личном сообщении 
</div>

PS: если чутка изменить верстку можно обойтись без js/jquery

div[data-share--audio--top] { 
  display: none; 
} 
 
input[name="share--audio--top"][value="1"]:checked ~ div[data-share--audio--top="1"], 
input[name="share--audio--top"][value="2"]:checked ~ div[data-share--audio--top="2"] { 
  display: block; 
}

<input id="ch1" type="radio" name="share--audio--top" value="1" checked> 
<label for="ch1"> На своей стене</label><br> 
<input id="ch2" type="radio" name="share--audio--top" value="2"> 
<label for="ch2"> В личном сообщении</label><br> 
<div data-share--audio--top="1"> 
  На своей стене 
</div> 
<div data-share--audio--top="2"> 
  В личном сообщении 
</div>

Answer 2

Если конкретно этот код (и всего 2 элемента списка), то можно сделать вот так:

$(document).on('click', '.radio input[type="radio"]', function() { 
  var val = $(this).val(); 
  switch (val) { 
    case '1': 
      $('div[data-share--audio--top="2"]').hide(); 
      $('div[data-share--audio--top="1"]').show(); 
      /* либо меняем значения свойства display 
      $('div[data-share--audio--top="2"]').css('display', 'none'); 
      $('div[data-share--audio--top="1"]').css('display', 'block'); 
      */ 
      break; 
    case '2': 
      $('div[data-share--audio--top="1"]').hide(); 
      $('div[data-share--audio--top="2"]').show(); 
      /* 
      $('div[data-share--audio--top="1"]').css({'display' : 'none'}); 
      $('div[data-share--audio--top="2"]').css({'display' : 'block'}); 
      */ 
      break; 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="radio"> 
  <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br> 
  <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label> 
</div> 
<div data-share--audio--top="1" style="display:none"> 
  На своей стене 
</div> 
<div data-share--audio--top="2" style="display:none"> 
  В личном сообщении 
</div>