Question

我正在尝试通过按钮类和ID创建指向网站的链接。我试图通过div id为每个创建一个可点击的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');
});

This is a working samlpe based on your jsfiddle

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');
});

查看此Fiddle ..

Answer 3

因为id应该是唯一的。或者使用class。我已经用课程取代你的身份证。所以你的代码

<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');
});

DEMO

Answer 4

这里是一个jsFiddle我在ID中将ID更改为Class，因为ID是一个标识符，不能重复两次LINK

$(".txtLinky").click(function () {
var link ='http://www.example.com/' + $(this).attr('id') + '?referringRepId=' +$("#textbox1").val();
       $(this).parent().children('.linkified').html(link);
        $('.linkified').linkify({
            tagName: 'a',
            target: '_blank',
            newLine: '\n'
        });

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

jQuery按钮id到div id

4 个答案: