下記のhtmlのソースで、ｃlassNameの所が何をしているのかが分からない。 htmlは、単に下記の行からテキストボックスの内容を読んで、該当する行を表示する物です。例えば、殺すと入力すると、下記が表示されます。奥さんが浮気をしているので間男を殺す事ばかりを考える事毎日朝から酒を腹一杯飲む事奥さんと欠かさずに24時間交尾をする事朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事食事は、常に腹一杯無理してでも食べる事塩辛い物は、遠慮しないで食べる事奥さんが浮気をしているので間男を殺す事ばかりを考える事以下省略 htmlの内容は下記です。サンプル li.hide{display:none;} 夢も希望も亡くなった人は下記を参照毎日朝から酒を腹一杯飲む事奥さんと欠かさずに24時間交尾をする事朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事食事は、常に腹一杯無理してでも食べる事塩辛い物は、遠慮しないで食べる事奥さんが浮気をしているので間男を殺す事ばかりを考える事以下省略この中で、以下のfor文が何をしているのかが分かりません。この中で、classNameと言うのは、何を示しているのでしょうか。宜しくお願いします。 for(var i=0;i<obj.length;i++){ obj[i].className=(obj[i].innerHTML.match(reg))?"":"hide"; }

詳しい人求む！

javascriptでclassNameの所が分からない

解決済

質問者：usui-2015
質問日時：2017/11/28 19:43
回答数：2件

下記のhtmlのソースで、ｃlassNameの所が何をしているのかが
分からない。

htmlは、単に下記の行からテキストボックスの内容を読んで、該当する行を
表示する物です。例えば、殺すと入力すると、下記が表示されます。

奥さんが浮気をしているので間男を殺す事ばかりを考える事

毎日朝から酒を腹一杯飲む事
奥さんと欠かさずに24時間交尾をする事
朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事
食事は、常に腹一杯無理してでも食べる事
塩辛い物は、遠慮しないで食べる事
奥さんが浮気をしているので間男を殺す事ばかりを考える事
以下省略

htmlの内容は下記です。

<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">

</script>
<style>
li.hide{display:none;}
</style>

<p>夢も希望も亡くなった人は下記を参照</p>
<ol id="target">
<LI>毎日朝から酒を腹一杯飲む事</LI>
<LI>奥さんと欠かさずに24時間交尾をする事</LI>
<LI>朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事</LI>
<LI>食事は、常に腹一杯無理してでも食べる事</LI>
<LI>塩辛い物は、遠慮しないで食べる事</LI>
<LI>奥さんが浮気をしているので間男を殺す事ばかりを考える事</LI>
<LI>以下省略</LI>
</OL>
<input type="text" name="keyword" id="keyword">
<input type="button" value="choice" onclick="choice()">
</body>
</html>

この中で、以下のfor文が何をしているのかが分かりません。
この中で、classNameと言うのは、何を示しているのでしょうか。

宜しくお願いします。

for(var i=0;i<obj.length;i++){
obj[i].className=(obj[i].innerHTML.match(reg))?"":"hide";
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2017/11/28 23:02

> ここでのclassNameと言うのは、cssのクラス。

> 次の3項演算子は、マッチした時にclassName=""にする。
> アンマッチの時は、className="hide"とする。

その認識でOKです。

> ここではclassName=""と言うのが、何を示しているのだろうか。
> と言う新たな疑問が有ります。

いやまさに、ついているclassを消しているのです。
javascriptの因習で、タグへのclassにアクセスするにはclassNameプロパティを
上書きすることで処理するのが一般的でした。

モダンなブラウザではclassListを使うことができるので
classNameを上書きするときに発生する「他のクラス名まできえちゃう」のを
さけることができます。
ただしIEはclassListの実装が不十分で、本来はclassList.toggle("クラス名",フラグ)
で処理ができるのですが、IE対策のためremoveして必要なものだけaddしてあります

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

大変、理解出来ました。

通報する

お礼日時：2017/11/28 23:10

No.1

回答者： yambejp
回答日時：2017/11/28 22:35

まず、

> var obj=document.getElementById("target").getElementsByTagName("li");
で、id=targetのタグ以下にあるliを全て抜きだして

> for(var i=0;i<obj.length;i++){
一つ一つのobjを検証して

> obj[i].className=(obj[i].innerHTML.match(reg))?"":"hide";
それぞれのclassNameを正規表現でヒットしたものだけhideに書き換えています

しかし書き方が古いので今風に書くとこんな感じです

<script>
document.addEventListener('click',function(e){
var t=e.target;
if(t.nodeName=="INPUT" && t.type=="button" && t.value=="choice"){
choice();
}
});
function choice(){
var reg=new RegExp(document.querySelector("#keyword").value);
Array.prototype.map.call(document.querySelectorAll("#target li"),function(x){
x.classList.remove("hide");
if(!x.innerHTML.match(reg)) x.classList.add("hide");
});
}
</script>
<style>
li.hide{display:none;}
</style>

<p>夢も希望も亡くなった人は下記を参照</p>
<ol id="target">
<LI>毎日朝から酒を腹一杯飲む事</LI>
<LI>奥さんと欠かさずに24時間交尾をする事</LI>
<LI>朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事</LI>
<LI>食事は、常に腹一杯無理してでも食べる事</LI>
<LI>塩辛い物は、遠慮しないで食べる事</LI>
<LI>奥さんが浮気をしているので間男を殺す事ばかりを考える事</LI>
<LI>以下省略</LI>
</OL>
<input type="text" name="keyword" id="keyword" value="奥さん">
<input type="button" value="choice">

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

obj[i].className=(obj[i].innerHTML.match(reg))?"":"hide";

ここでのclassNameと言うのは、cssのクラス。
次の3項演算子は、マッチした時にclassName=""にする。
アンマッチの時は、className="hide"とする。

上記の様に理解しましたが。これで合っているでしょうか。

唯、ここではclassName=""と言うのが、何を示しているのだろうか。
と言う新たな疑問が有ります。

済みません。よろしく回答願います。

通報する

お礼日時：2017/11/28 22:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！