window.getComputedStyle は Chrome でスタイルの値を提供しますが、firefox と Microsoft Edge では空の文字列を提供し、Internet Explorer ではそのメソッドをサポートしていないと言います。これが私のコードです。
Upvote 画像がクリックされるたびに、upDownVote()関数が起動され、2 つの引数が渡されます。これがHTMLです。
<div id="upvote" title="Click to UpVote" onClick="upDownVote('increment',<?php echo $id; ?>);"></div>
<div id="downvote" title="Click to DownVote" onClick="upDownVote('decrement',<?php echo $id; ?>);"></div>
ajax を介して 3 つの変数を php スクリプトに渡しました。ID、タイプ、適用可能。Type には、インクリメントまたはデクリメントのいずれかの値を 1 つ格納できます。
欲しかった、賛成ボタンもクリックされます。投票値が1つ増え、ボタンの背景が変わります。ボタンの反対票も同じですが、ここでは投票値が減少しています。これをtype変数で処理します。
賛成票が再度クリックされる (またはユーザーがダブルクリックする) と、投票値が増加するのではなく、減少する必要があります。これは、if 条件内にネストされた if 条件で処理しました (タイプがインクリメントの場合)。その状態で、applicableが1より大きいかどうかを確認しました。そうであれば、デクリメントに変更しtypeて 0 に適用し、背景も元の画像に変更しました。
しかし、ユーザーが反対票ボタンをクリックした後に賛成票ボタンをクリックした場合はどうでしょうか。その状態で、applicable値は 1 より大きくなります。そして、typeデクリメントに変更する必要があります。そんなことはあってはなりません。このため、ネストされたif条件で、反対票ボタンの背景も確認します。ページがロードされる前と同じである必要があります。
該当する値が 1 より大きい場合 (ユーザーが反対票をクリックする前に賛成票をクリックした場合)。私のphpスクリプトでは、投票値を2つ増やします。
反対票ボタンの同じロジック。
ここに JavaScript があります。
var applicable = 0; // determine applicable to vote or not.
var upvote = document.getElementById("upvote");
var downvote = document.getElementById("downvote");
var upvoteBlack = window.getComputedStyle(upvote).getPropertyValue("background");
var downvoteBlack = window.getComputedStyle(downvote).getPropertyValue("background");
function upDownVote(x, id) {
debugger;
var type = x; // determine the type(increment or decrement).
if (type === "increment") {
upvote.style.background = "url(img/image-sprite-1.jpg) 0px -40px";
applicable++; // increment in the applicable.
if (applicable > 1 && window.getComputedStyle(downvote).getPropertyValue("background") === downvoteBlack) {
type = "decrement";
applicable = 0;
upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
}
downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
} else {
downvote.style.background = "url(img/image-sprite-1.jpg) -40px -40px";
applicable++;
if(applicable > 1 && window.getComputedStyle(upvote).getPropertyValue("background") === upvoteBlack) {
type = "increment";
applicable = 0;
downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
}
upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
}
// Ajax started here.
}
upvoteとの CSS downvote。
div#upvote {
width: 40px;
height: 40px;
background: url(../img/image-sprite-1.jpg);
background-position: 0px 0px;
margin: 0px auto;
margin-top: 10px;
cursor: pointer;
}
div#downvote {
width: 40px;
height: 40px;
background: url(../img/image-sprite-1.jpg) -40px 0px;
background-position: -40px 0px;
margin: 0px auto;
cursor: pointer;
}
すべてが正常に動作しますが、今は立ち往生しています。window.getComputedStyleすべてのブラウザーで正常に機能しないボタンの背景値を取得する方法。background プロパティを持つことができる他のプロパティがあることを知りたいです。
また、異なるロジックで同じことを行う方法を知りたいです。の解決策が見つからない場合window.getComputedStyle。