Блог

Главная - Вопросы по программированию - Поведение начальной загрузки 3 групповых кнопок

Поведение начальной загрузки 3 групповых кнопок

#jquery #asp.net #buttongroup

Вопрос:

У меня обычное поведение групповой кнопки с меткой и переключателями:

 <div class="btn-group" data-toggle="buttons">
  <label class="btn" id="lblAct1">
    <input type="radio" value="Val1">
    Act1
  </label>
  <label class="btn" id="lblAct2">
    <input type="radio" value="Val2">
    Act2
  </label>
  <label class="btn" id="lblAct3">
    <input type="radio" value="Val3">
    Act3
  </label>
</div>

Когда я меняю заголовок метки с $("#lblAct1").html(getTranslation("ACT1")) элементами группы кнопок, поведение останавливается по мере необходимости(нажатый элемент стал активным, другие неактивны)

Пожалуйста, помогите.

Ответ №1:

Проблема в том, что html() перезаписывается все содержимое в целевом элементе, а не только текстовые узлы. Кроме того, поскольку вы имеете дело с текстовым контентом, а не с HTML, вы можете использовать этот text() метод для предотвращения атак XSS.

Также обратите внимание, что, если предположить, что эти радиовходы связаны, они должны иметь один и тот же name атрибут, чтобы их можно было правильно сгруппировать.

Простое решение для вашей ситуации состоит в том, чтобы поместить текстовый узел в другой элемент , например a span , а затем установить text() вместо него значение этого элемента:

 let getTranslation = input => input   ' translation here...';

$("#lblAct1 span").text(getTranslation("ACT1")) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn" id="lblAct1">
    <input type="radio" value="Val1" name="foo" />
    <span>Act1</span>
  </label>
  <label class="btn" id="lblAct2">
    <input type="radio" value="Val2" name="foo" />
    <span>Act2</span>
  </label>
  <label class="btn" id="lblAct3">
    <input type="radio" value="Val3" name="foo" />
    <span>Act3</span>
  </label>
</div>

Также обратите внимание, что вы можете сделать свой код перевода полностью динамичным, предоставив текст элемента getTranslation() функции прямо из DOM, вместо его жесткого кодирования и прикрепив N вызовов методов:

 let getTranslation = input => input   ' translation here...';

$(".translatable span").text((i, t) => getTranslation(t)) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn translatable">
    <input type="radio" value="Val1" name="foo" />
    <span>Act1</span>
  </label>
  <label class="btn translatable">
    <input type="radio" value="Val2" name="foo" />
    <span>Act2</span>
  </label>
  <label class="btn translatable">
    <input type="radio" value="Val3" name="foo" />
    <span>Act3</span>
  </label>
</div>
Метки: