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格式的所有问题，这里是一个示例，它将遍历带有以'land'结尾的id的所有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。

jquery函数动态创建按钮

1 个答案: