0

ユーザーが必要なリンクタイプをクリックすると、クリックしたものに基づいて下の小さなテキストフィールドで開くスクリプトを作成しようとしています。

例えば私の例

ユーザーが希望するリンクをクリックすると、クリック時にそのテキストフィールドが希望するように変更されるようなものを作成するにはどうすればよいですか?

4

2 に答える 2

2

次のマークアップスタイルを想定しています。

<ul>
    <li><a class="linkInsert" href="http://www.example.com/article/">Link (email &amp; blogs)</a></li>
</ul>
<input id="linkText" />​

次に、プレーンJavaScriptを使用できます。

var links = document.getElementsByTagName('a'),
    textInput = document.getElementById('linkText'),
    linkInserts = [];

for (var i = 0, len = links.length; i < len; i++) {
    if (links[i].className == 'linkInsert') {
        linkInserts.push(links[i]);
    }
}

for (var i = 0, len = linkInserts.length; i < len; i++) {
    linkInserts[i].onclick = function(e) {
        e.preventDefault();
        textInput.value = this.parentNode.innerHTML;
    };
}​

JSフィドルデモ。

または、jQueryを使用する場合：

$('a.linkInsert').click(
    function(e){
        e.preventDefault();
        $('#linkText').val($(this).parent().html());
    });​​​​​​​​​​​​​​​​​​

JSフィドルデモ。

貼り付けたHTMLの冗長な属性を回避し、それらをフィルターで除外する必要があるため、上記のHTMLを次のように変更しました。これで、親li要素をターゲットにします。

<ul>
    <li class="linkInsert"><a href="http://www.example.com/article/">Link (email &amp; blogs)</a></li>
</ul>
<input id="linkText" />​

jQuery：

$('li.linkInsert a').click(
    function(e){
        e.preventDefault();
        $('#linkText').val($(this).parent().html());
    });​

JSフィドルデモ。

そして、修正されたHTMLを使用するように更新されたプレーンJavaScriptバージョン：

var listElems = document.getElementsByTagName('li'),
    textInput = document.getElementById('linkText'),
    linkInserts = [];

for (var i = 0, len = listElems.length; i < len; i++) {
    if (listElems[i].className == 'linkInsert') {
        linkInserts.push(listElems[0].getElementsByTagName('a')[0]);
    }
}

for (var i = 0, len = linkInserts.length; i < len; i++) {
    linkInserts[i].onclick = function(e) {
        e.preventDefault();
        textInput.value = this.parentNode.innerHTML;
    };
}​

JSフィドルデモ。

そして、もう少し最新のアプローチを使用して、addEventListener()：

function showHTML(evt){
    evt.preventDefault();
    var textInput = document.getElementById('linkText'),
        target = evt.target,
        targetTag = target.tagName.toLowerCase();
    if (targetTag == 'a'){
        textInput.value = target.parentNode.innerHTML;
    }
    else if (targetTag == 'li'){
        textInput.value = target.innerHTML;
    }

}

document
    .getElementsByTagName('ul')[0]
    .addEventListener('click',function(evt) { showHTML(evt) },false);

JSフィドルデモ。

そして最後に、互換性があると思われるバージョン古代の「レガシー」InternetExplorer（IE 8、WinXPおよびIE 9、Win7でテスト済み）：

function showHTML(evt) {
    var evt = evt || event;
    if (evt.preventDefault){
        evt.preventDefault();
    }
    else {
        event.returnValue = false;
    }

    var textInput = document.getElementById('linkText'),
        target = evt.target ? evt.target : evt.srcElement,
        targetTag = target.tagName.toLowerCase();
    if (targetTag == 'a') {
        textInput.value = target.parentNode.innerHTML;
    }
    else if (targetTag == 'li') {
        textInput.value = target.innerHTML;
    }

}

if (window.addEventListener) {
    document.getElementsByTagName('ul')[0].addEventListener('click', function(evt) {
        showHTML(evt)
    }, false);
}
else if (window.attachEvent) {
    document.getElementsByTagName('ul')[0].attachEvent('onclick', showHTML);
}​

JSフィドルデモ。

参照：

于 2012-07-08T21:23:19.697 に答える
0

リンクがどこにも行かないようにします。たとえば、#、ID を与える、jquery でクリックを聞く、または onclick html 属性を使用し、領域を選択し、クリックされたリンク テキストを設定します :-)

于 2012-07-08T21:04:42.170 に答える