3

私はJavaScriptを初めて使用するので、助けが必要です。私はウェブサイトを作成していますが、チームメンバーの画像がいくつかあり、クリックすると（onclickイベントを推測しています）、そのチームメンバーに対応する変数値が変更されます。たとえば、別のdivでBill Gatesの画像をクリックした場合、変数（たとえばName）の値をBillGatesに変更する必要があります。次に、Steve Jobsの画像をクリックすると、BillGatesのデータを含む変数がSteveJobsのデータで上書きされます。どうすればよいですか？

ありがとうございました。

4

4 に答える 4

1

次のようなマークアップを想定しています。

<div id="gallery">
    <img class="people" data-subject="Steve Jobs" src="path/to/imageOfSteve.png" />
    <img class="people" data-subject="Bill Gates" src="path/to/imageOfBill.png" />
</div>
<span id="caption"></span>

次に、比較的単純で単純なJavaScriptのアプローチ：

function identifySubject(image, targetEl) {
    if (!image) {
        return false;
    }
    else {
        var targetNode = document.getElementById(targetEl) || document.getElementById('caption'),
            person = image.getAttribute('data-subject');
            text = document.createTextNode(person);
        if (targetNode.firstChild.nodeType == 3) {
            targetNode.firstChild.nodeValue = person;
        }
        else {
            targetNode.appendChild(text);
        }
    }
}

var images = document.getElementsByClassName('people');
for (var i=0, len=images.length; i<len; i++) {
    images[i].onclick = function(e){
         identifySubject(this, 'caption');
    };
}

JSフィドルデモ。

于 2012-09-07T22:32:51.943 に答える
0

お役に立てれば

<img src="path/to/image1"  onclick="getValue('bill gates')" />
<img src="path/to/image2"  onclick="getValue('steve jobs')"/>
<div id="show_value"></div>

<script>
function getValue(val){
    document.getElementById('show_value').innerHTML = val
}
</script>
于 2012-09-07T22:31:46.750 に答える
0

HTML：

 <div class="member"><img src="billgates.jpg" /><span>Bill Gates bla bla</span></div>
 <div class="member"><img src="stevejobs.jpg" /><span>Steve Jobs bla bla</span></div>
 <div id="variables"></div>

JS：

$(function(){
    $('.member img').click(function(){
        $('#variables').html($(this).closest('span').html());
    });

});
于 2012-09-07T22:33:08.150 に答える
0

Onclick属性は正しいです。画像のonclick属性にjavascript関数の名前を追加する必要があります（例<img src="" onclick="changeVariable()"...）。

クリックしたユーザーに応じてページ上のテキストを変更する場合は、getElementById()または類似のJavaScriptでdivを選択し、InnerHTMLプロパティを確認する必要があります。

参照：http ：//woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html

于 2012-09-07T22:28:38.950 に答える