Блог

Главная - Вопросы по программированию - Вставить в карусель динамически

Вставить в карусель динамически

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хотел бы динамически вставлять эту функцию, но я не знаю, почему она не работает.

Это моя функция jQuery…

  $(document).ready(function () {
        $('body').removeClass('no-js');
        //$('#my-carousel-1').carousel();
        $('#my-carousel-2').carousel({
            itemsPerPage: 6,
            itemsPerTransition: 6,
            speed: 500
        });
        $('#my-carousel-3').carousel({
            itemsPerPage: 6,
            itemsPerTransition: 6,
            easing: 'linear',
            noOfRows: 2
        });



        $('#MainContent_btnAddTag').click(function () {
            var inp = $("#MainContent_txtSearch").val();
            if ($.trim(inp).length > 0) {

                var num = 1   Math.floor(Math.random() * 7);

                var lit = '<li value="0" class="color-'   num   '">testInsert</li>';

                $('#my-carousel-2 ul').append(lit);
            }
        });
    });

в моем HTML есть разные вещи, которые я не могу изменить, например, CssClass или что-то в этом роде.

 <div class="frmfield">
<WWTB:WWTextBox runat="server" ID="txtSearch" CssClass="tBox" LabelValue="Search"
 Text="Search" ErrorMessage="Please enter a" 
 ValidationType="NotBlank" ErrorClass="error"></WWTB:WWTextBox>
 <div class="frmbtnblock">
 here my button to add tags
 <asp:Button ID="btnAddTag" Text="Add tag" CssClass="btn btnRight" runat="server" />
 </div>
 </div>
 <div class="frmfield">
 <div id="my-carousel-2" class="carousel">
 <ul id="ulSelected">
 <%-- here my new li --%>
 </ul>
 </div>
 </div>

Комментарии:

1. Где это #button ? И где вы разместили код? Внутри document.ready ?

2. Почему вы используете: $(‘#my-carousel ul’).добавить(горит); использовать ul напрямую: $(‘#ulSelected’).добавить(горит);

3. Здесь все работает нормально — jsfiddle.net/7LxD8

4. спасибо за вашу помощь, да; моя кнопка находится в document.ready .

5. @Jotch это $('#ulSelected') не должно быть $('ulSelected')

Ответ №1:

Вы можете использовать jQuery для создания нового li элемента, программно задать его атрибуты и добавить его в ul . 

 var $ul = $('#ulSelected');

$('<li>')
  .attr('value', 0)
  .addClass('color-'   num)
  .text('testInsert')
  .appendTo($ul);

Я считаю, что этот стиль приводит к более удобочитаемому коду, чем включение фрагментов HTML в ваш Javascript.

Ответ №2:

 $('ul#ulSelected').append('<li value="0" class="color-'   num   '">testInsert</li>');