javascript - クリックした後、段落を太字にする

Question

<div id="box">
<p class="b">item 1</p>
<p class="b">item 2</p>
<p class="b">item 3</p>
<p class="b">item 4</p>
<p class="b">item 5</p>
</div> 

クリックした後に選択した段落を太字にする方法は？たとえば、[アイテム2]をクリックすると、クリックした後にアイテム2のみが太字になります。

Answer 1

私は提案します：

function makeBold(el) {
    el.style.fontWeight = 'bold';
}

var paragraphs = document.getElementsByTagName('p');

for (var i = 0, len = paragraphs.length; i<len; i++){
    paragraphs[i].onclick = function(){
        makeBold(this);
    };
}

JSフィドルデモ。

または、フォントの太さを切り替えたい場合は、次のようにします。

function toggleBold(el) {
    el.style.fontWeight = el.style.fontWeight == 'bold' ? 'normal' : 'bold';
}

var paragraphs = document.getElementsByTagName('p');

for (var i = 0, len = paragraphs.length; i<len; i++){
    paragraphs[i].onclick = function(){
        toggleBold(this);
    };
}

JSフィドルデモ。

または、太字のテキストで1つの段落のみを使用したい場合（2番目の段落をクリックすると、他のp要素が太字ではない状態に戻ります）：

function toggleBold(el) {
    var siblings = el.parentNode.getElementsByTagName('p');
    for (var i = 0, len = siblings.length; i<len; i++){
        if (siblings[i] == el){
            el.style.fontWeight = el.style.fontWeight == 'bold' ? 'normal' : 'bold';
        }
        else {
            siblings[i].style.fontWeight = 'normal';
        }
    }
}

var paragraphs = document.getElementsByTagName('p');

for (var i = 0, len = paragraphs.length; i<len; i++){
    paragraphs[i].onclick = function(){
        toggleBold(this);
    };
}

JSフィドルデモ。

Answer 2

これを試して：

HTML：

<p class="b" onclick="GetBold(this)">item 2</p>

JavaScript：

function GetBold(current)
{
   var array = document.getElementsByClassName('p');

   for (var i = 0; i < array.length; i++)
   {
        array[i].style.fontWeight = 'normal';
   }

   current.style.fontWeight = 'bold';
}

Answer 3

jQueryを使用する場合：

$('.b').click(function(){
  $(this).css({'font-weight':'bold'})
})