web-dev-qa-db-ja.com

javascriptでimage.src.matchを説明する

私はこのチュートリアルに従っていましたが、いくつかのjavascriptコードが理解しにくいことがわかりました。

チュートリアルへのリンク

http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

明確にする必要があるコード

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

（image.src.match内の）MATCHが実際に何を意味するのかわかりません。それはトグルアクションを持っているものですか？これに役立つ記事は見つかりませんでした。

javascripthtmlimagetogglematch
6
user2994762

さて、@ elclanrsはString.prototype.match()の説明のためにすでにリンクを提供しています。しかし、以下はあなたのためにいくつかのことを明らかにする答えです。

HTML：

_<img id="myImage" src="http://www.w3schools.com/js/pic_bulbon.gif" />
_

JavaScript：

_// capture the image
var image = document.getElementById('myImage');

console.log(image.src);                                // http://www.w3schools.com/js/pic_bulbon.gif
console.log(image.src.match("Word-not-in-src-name"));  // null
console.log(image.src.match("bulbon"));                // ["bulbon", index: 32, input: "http://www.w3schools.com/js/pic_bulbon.gif"] 

// image.src.match("bulbon") will return an Array, but it evaluates true in JavaScript
// This is the reason why "Evaluates true!" is printed out to console
if(image.src.match("bulbon")) {
    console.log("Evaluates true!");
}

// To prove my point, "Empty array!" also will be printed out to console
if([]) {
    console.log("Empty array!");
}
_

これは次のように自分で確認できますJS FIDDLE Example

したがって、コード例に戻るには、次のようにします。

_if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
} else {
    image.src = "pic_bulbon.gif";
}
_

..は、bulbonWordが現在の画像src属性にある場合、実行がifブロック内に移動するため、画像は_pic_bulboff.gif_に変更されることを意味します。これは、image.src.match("bulbon")が配列（上記の例で示され、docsでも説明されています）。

乾杯、うまくいけば、将来、いくつかの単語が文字列の一部であるかどうかを確認する方法を理解できたと思います:)

7
Mauno Vähä

.match()は、指定された文字列が正規表現に一致するかどうかをテストします。

あなたの例では、image.srcに文字列"bulbon"が含まれているかどうかをテストします。

一致するものがある場合は、image.srcを"pic_bulboff.gif"に変更します。

この関数の詳細については、次のことをお勧めします。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

7
Jan Drewniak

.matchは、この場合、文字列が正規表現に一致する天気を確認するためのテストを意味しますbulbon match image.src = "pic_bulbon.gif";一致する場合は電球を意味しますはオンであるためオフになり、オフの場合はelseステートメントで再びオンになります。

1
user5372275

image.src.matchは、画像のソースファイル名が何か（この場合は「bulbon」）と一致することを確認するだけです。

一致する場合（ "if"）、コードのブロックが実行され、一致しない場合、別のコードのブロックが実行されます（ "else"）

0
dang
function myFunction() {
    var x, text;
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
0
premji