jQuery按钮id到div id

Question

我试图通过按钮类和ids创建到站点的链接。我正试图通过div ids为每个用户创建一个可点击的html链接。

这是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="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>
                                   <input type="hidden" name="basic1" id="basic1" value="TMTDeluxe"/>
                                     <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="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="txtLinky" id="Tomorrowland">Click Link</button><br/>
                                            <div id="linkified">value</div>     
                                    </ul>
                             </li>
                          </ul>
                      </li>
                   </li>

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

这是javascript

 $(".txtLinky").click(function () {

   // Get the Text from TextArea and give that to the Div.
    $('#linkified').html('http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val());

    // Now, linkify all the links present in the Text.
    $('#linkified').linkify({
        tagName: 'a',
        target: '_blank',
        newLine: '\n'
    });


$('#linkified').css('padding', '10px');
});

我需要每个按钮更新它下面的div id，而不是第一个初始div id。有办法让这件事成功吗？

这是代码http://jsfiddle.net/VFhK9/6/

Answer 1

首先，我想指出，具有相同id的多个元素的是一个坏习惯，。，我会让它们成为类。但是，如果愿意，请检查以下代码：

$(".txtLinky").click(function () {

    // Get the Text from TextArea and give that to the Div.
    $(this).parent().children('#linkified').html('http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val());

    // Now, linkify all the links present in the Text.
    $(this).parent().children('#linkified').linkify({
        tagName: 'a',
        target: '_blank',
        newLine: '\n'
    });


    $(this).parent().children('#linkified').css('padding', '10px');
});

这是一个基于你的小提琴的工作样本

Answer 2

您可以使用$(this)并从它的下一个元素开始。将您的代码更改为：

$(".txtLinky").click(function () {
       // Get the Text from TextArea and give that to the Div.
        $(this).siblings('#linkified').html('http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val());

        // Now, linkify all the links present in the Text.
        $(this).siblings('#linkified').linkify({
            tagName: 'a',
            target: '_blank',
            newLine: '\n'
        });

        $(this).siblings('#linkified').css('padding', '10px');
});

看看这个小提琴..。

Answer 3

因为id应该是unique.or，所以使用类。我把你的身份证换成了课。所以你的代码

<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="txtLinky" id="Adventureland">Click Link</button><br/>
                                                    <div class="linkified">value</div>      
                                        </ul>
                                 </li>
                                 <li><span>Frontierland</span>
                                    <ul id="Frontierland">
                                       <li class="Label">&nbsp;</li>
                                       <input type="hidden" name="basic1" id="basic1" value="TMTDeluxe"/>
                                         <button class="txtLinky" id="Frontierland">Click Link</button><br/>
                                                <div class="linkified">value</div>  
                                        </ul>
                                 </li>
                                 <li><span>Fantasyland</span>
                                    <ul id="Fantasyland">
                                       <li class="Label">&nbsp;</li>
                                        <button class="txtLinky" id="Fantasyland">Click Link</button><br/>
                                                <div class="linkified">value</div>      
                                        </ul>
                                 </li>
                                 <li><span>Tomorrowland</span>
                                    <ul id="Tomorrowland">
                                       <li class="Label">&nbsp;</li>
                                        <button class="txtLinky" id="Tomorrowland">Click Link</button><br/>
                                                <div class="linkified">value</div>      
                                        </ul>
                                 </li>
                              </ul>
                          </li>
                       </li>

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

js

$(".txtLinky").click(function () {

       // Get the Text from TextArea and give that to the Div.
        $(this).siblings('.linkified').html('http://www.example.com/' + $(this).attr('id') + '?referringRepId=' + $("#textbox1").val());

        // Now, linkify all the links present in the Text.
        $(this).siblings('.linkified').linkify({
            tagName: 'a',
            target: '_blank',
            newLine: '\n'
        });


            $(this).siblings('.linkified').css('padding', '10px');
});

演示