jquery函数动态创建按钮

Question

我正在尝试查看是否可以使用 jquery 创建动态按钮。这些按钮将完全相同，但将特定变量传递给链接到站点或创建站点链接的函数。如果我有超过 300 个列表项，我不想创建每个新列表项。有没有办法为每个列表项创建一个函数来动态创建按钮？

这里是html

<nav id="menu">
    <div id="app">
<ul class="List"><li><span>Enter Number below</span>
            </li>
            <div id="number">
            <input type="text" name="number" id="textbox1" value="22984">
            </div>              
                <li><span>Disney</span>
                <ul id="programs">                  
                      <li><span>Lands</span>
                          <ul id="10min">

                             <li><span>Adventureland</span>
                                <ul id="Adventureland">
                                   <li class="Label">&nbsp;</li>
                            <button class="redirect" id="AdventureLand">Open Website</button><br/>
                            <button class="txtLinky" id="Adventureland">Click Link</button><br/>
                                                <div id="linkified">value</div>     
                                    </ul>
                             </li>
                             <li><span>Frontierland</span>
                                <ul id="Frontierland">
                                   <li class="Label">&nbsp;</li>
                                   <button class="redirect" id="Frontierland">Open Website</button><br/>
                                     <button class="txtLinky" id="Frontierland">Click Link</button><br/>
                                            <div id="linkified">value</div> 
                                    </ul>
                             </li>
                             <li><span>Fantasyland</span>
                                <ul id="Fantasyland">
                                   <li class="Label">&nbsp;</li>
                                    <button class="redirect" id="FantasyLand">Open Website</button><br/>
                                    <button class="txtLinky" id="Fantasyland">Click Link</button><br/>
                                            <div id="linkified">value</div>     
                                    </ul>
                             </li>
                             <li><span>Tomorrowland</span>
                                <ul id="Tomorrowland">
                                   <li class="Label">&nbsp;</li>
                                    <button class="redirect" id="TomorrowLand">Open Website</button><br/>
                                    <button class="txtLinky" id="Tomorrowland">Click Link</button><br/>
                                            <div id="linkified">value</div>     
                                    </ul>
                             </li>
                          </ul>
                      </li>
                   </li>

                </ul>
            </li>               
        </ul>

这里是javascript

$(".redirect").click(function(){                 
            goUrl = 'http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val();
            window.location = goUrl;
            });

$(".txtLinky").on("click", function () {    
            var link = 'Copy and paste '+ 'http://teambeachbody.com/shop/-/shopping/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val(); 
                $(this).parent().children('#linkified').html(link);

           $(this).parent().children('#linkified').linkify({
               tagName: 'a',
               target: '_blank',
               newLine: '\n'
            }); 

            $(this).parent().children('#linkified');
            });

这里是 jsfiddle http://jsfiddle.net/VFhK9/18/

Answer 1

是的，有可能！

首先，我建议修改您的 HTML 代码，因为在 UL 中使用除 LI 之外的其他标签是一种不好的做法……而且您对不同元素使用的 ID 不是唯一的……

忽略 HTML 格式的所有问题，这里的示例将遍历所有 id 以“land”结尾的 UL 元素，并添加带有两个按钮的新 LI 元素：

$('ul[id$="land"]').each(function() {
    var ul = this;
    $(ul).append(
        $(document.createElement('li'))
            .append(
                $(document.createElement('button'))
                    .addClass('redirect')
                    .text('Open Website')
                    .click(function() {
                        var goUrl = 'http://www.example.com/' + $(ul).attr('id') + '?referringRepId=' + $("#textbox1").val();
                        window.location = goUrl;
                    })
            )
            .append(
                $(document.createElement('button'))
                    .addClass('txtLinky')
                    .text('Click Link')
                    .click(function() {
                        // add other functionality here...
                    })
            )
    )
});

我认为总体思路很清楚......只需使用最少的所需信息构建 HTML，然后使用 jQuery 动态添加其余部分。

这里更新Fiddle。