功能中的Linkify自定义链接 [英] Linkify custom link in function

问题描述

我正在尝试使用此html基于不同的按钮创建自定义链接.

I am trying to create custom links based on different buttons using this html.

<input type="text" name="coachid" id="textbox1" value="22984">
<button class="txtLinky" id="Mickey">Mickey</button><br/>       
<div id="linkified"></div>  
<button class="txtLinky" id="Donald">Donald</button><br/>
<div id="linkified"></div>  

这是JavaScript

Here is the javascript

$(".txtLinky").click(function () {                              
            $('#linkified').html('http:www.example.com/' + $(this).attr('id') + '?referringpId=' + $("#textbox1").val());

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

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

不确定如何使第二个按钮起作用.第一个按钮将起作用，而第二个按钮将不起作用.

Not sure how to get the second button to work. The first button will work but not the second.

这是 http://jsfiddle.net/VFhK9/4/

推荐答案

您有多个div元素和id="linkified".

id是唯一的；您最多只能有一个具有相同ID的控件.

id is unique; you cannot have more than one control with the same id.

您可以将id属性更改为class属性，并执行以下操作:

You could change your id attributes to class attributes and do something like this:

<input type="text" name="coachid" id="textbox1" value="22984" />
<br />
<br/>
<button class="txtLinky" id="Mickey">Click Link</button>
<br/>
<div class="linkified">value</div>
<br/>
<button class="txtLinky" id="Donald">Click Link</button>
<br/>
<div class="linkified">value</div>

$(".txtLinky").on("click", function () 
{
    var $this = $(this),
        id = $this.attr("id"),
        text = $("#textbox1").val();

    $this
        .nextAll('.linkified:first')
        .css({ padding: '10px' })
        .html
        (
            'http://www.example.com/'
            + id
            + '?referringRepId='
            + text
        )
        .linkify
        ({
            tagName: 'a',
            target: '_blank',
            newLine: '\n'
        });
});

这篇关于功能中的Linkify自定义链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！