Стили не применяются должным образом в динамически создаваемых переключателях

ProgramBox

Стили не применяются должным образом в динамически создаваемых переключателях

Post author:admin
Запись опубликована:13 марта, 2023
Post category:Вопросы по программированию

#jquery #html #css #jquery-mobile

#jquery #HTML #css #jquery-мобильный

Вопрос:

Я должен динамически создавать группу переключателей.Я могу успешно создать его.Но проблема в том, что динамически создаваемые переключатели не похожи на статические.

Я попробовал два подхода: 1) Вызываемый create fieldset — ui-corner-all класс добавляется во внутренний диапазон, и в результате все переключатели выглядят округленными. 2) Вызывается create в div, который заключает fieldset в себе — здесь проблема лучше.Но все же некоторые проблемы существуют.Сначала, когда есть только переключатель, ui-controlgroup-last класс добавляется к этой радиокнопке. Затем, когда добавляется вторая радиокнопка, ui-controlgroup-last класс добавляется к этой радиокнопке.Но ui-controlgroup-last все еще присутствует в первом переключателе, и этот цикл повторяется.В результате все переключатели имеют стили last radiobutton .

Это мой код:

 <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i  )
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-' i '"/><label for="radio1-' i '">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-' i '"/><label for="radio2-' i '">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>

P.S — Причина, по которой я вызываю create после каждого добавления, заключается в том, что именно так это работает в моем реальном случае использования — в любое время создается только один переключатель.

Сгенерированный источник

 <html lang="en" class="ui-mobile"><head><base href="http://localhost:8081/html5/calendar-new/radio_issue.html">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i  )
    {
        $("#rgroup1").append('<input type="radio" name="rg1" id="radio1-' i '"/><label for="radio1-' i '">Value</label>');
        $("#rgroup1").trigger("create");

        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-' i '"/><label for="radio2-' i '">Value</label>');
        $("#radiodiv1").trigger("create");

    }
});

    </script>
<title></title></head>

<body class="ui-mobile-viewport"><div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; ">
  <div data-role="content" class="ui-content" role="main">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
            <div class="ui-radio"><input type="radio" name="rg" id="radio-1"><label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-2"><label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
            <div class="ui-radio"><input type="radio" name="rg" id="radio-3"><label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
        </fieldset>
    </div>
    <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg1" id="radio1-0"><label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-1"><label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-2"><label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
        <div class="ui-radio"><input type="radio" name="rg2" id="radio2-0"><label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-1"><label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-2"><label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
    </div>
  </div>

</div><div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>

Ответ №1:

Я исправил эту проблему, явно удалив ui-controlgroup-last ui-corner-bottom классы and из всех меток, кроме метки для последнего переключателя

 <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
    <script>
$(document).ready(function()
{
    for (var i = 0; i < 3; i  )
    {
        /*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-' i '"/><label id="label1-' i '" for="radio1-' i '">Value</label>');
        $("#rgroup1").trigger("create");*/


        $("#rgroup2").append('<input type="radio" name="rg2" id="radio2-' i '"/><label id="label2-' i '"for="radio2-' i '">Value</label>');
        $("#radiodiv1").trigger("create");


    }
    for (var i = 0; i < 2; i  )
    {
        $('#label2-' i).removeClass("ui-controlgroup-last ui-corner-bottom");
    }
});

    </script>
</head>

<body>
  <div data-role="content">
    <h3>Normal radio buttons</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup">
            <input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
            <input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
            <input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
        </fieldset>
    </div>
    <!-- <h3>Dynamically created-Div Refresh</h3>
    <div id="radiodiv">
        <fieldset data-role="controlgroup" id="rgroup1">
        </fieldset>
    </div> -->
     <h3>Dynamically created-Fieldset Refresh</h3>
    <div id="radiodiv1">
        <fieldset data-role="controlgroup" id="rgroup2">
        </fieldset>
    </div>
  </div>
</body>

Ответ №2:

Вам необходимо обновить кнопки..

Обновление переключателя

Если вы управляете переключателем с помощью JavaScript, вы должны вызвать для него метод обновления, чтобы обновить визуальный стиль. Вот пример:

 $("input[type='radio']").attr("checked",true).checkboxradio("refresh");

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html

1. Это для обновления визуальных стилей, когда вы программно выбираете любую из переключателей через js. Здесь я не делаю никакого выбора с помощью js. Вместо этого пытаюсь динамически создавать переключатели. Спасибо, что нашли время ответить на мой запрос.

Ответ №3:

поскольку вы используете jquery, я бы рекомендовал вам использовать

$(«#radio1-» i).addClass(«classname»)

1. Затем я должен написать код для удаления ненужных классов и добавления необходимых классов. Я думал, что jquery mobile должен справиться с этим сам.

2. Я уверен, что есть способ, когда у меня возникла аналогичная проблема с обновлением фона, я потратил много часов, а затем решил, что несколько строк кода не стоят ожидания. Я больше беспокоился о задержке вступления в силу стилей, но, к счастью, задержки вообще не было. Надеюсь, вы сможете найти ответ, который ищете.

Ответ №4:

Если кто-нибудь столкнется с этим вопросом, правильным способом применения стиля с текущей версией (1.4.5) является enhanceWithin

В написанном мной фрагменте кода после создания фрагмента динамического html я добавляю его, а затем применяю стили:

 var currentAddressInput = new AddressInterface();
jQuery("#contentDiv").append(currentAddressInput.domElement).enhanceWithin();