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 .