2017-04-02 29 views
0
const style1=['50%','3.5vw','3.5vw','2.5vw','2.5vw'] 
const style2=['0%','22.5%','95%','2.5vw','2.5vw'] 

function addbuttonAnimation() { 
    let applied = (document.activeElement.id === 'add-order') ? [].concat(style2) : [].concat(style1) 
    let x = document.querySelector('#add-order') 

    function goStyle(...applied) { 
     x.style.borderRadius = applied[0] 
     x.style.width =applied[1] 
     x.style.height =applied[2] 
     x.style.bottom =applied[3] 
     x.style.right =applied[4] 
    } 

    goStyle(...applied) 
} 

document.querySelector('#add-order').addEventListener("mouseup", addbuttonAnimation, false); 
document.querySelector('main-wrap').addEventListener("mouseup", addbuttonAnimation, false); 

"適用された"配列値が変更された(同じ値か以前の呼び出しではない)ことをどのように知ることができますか?だから、 "addbuttonAnimation()"が呼び出されたときは、 "適用された"配列が以前の呼び出しと同じ値を持っていれば、再度値を再割り当てする必要はありません。配列の値が同じかどうかを確認するにはどうすればいいですか?

答えて

1

indexOf()メソッドは、指定された項目の配列を検索し、その位置を返します。

検索は指定された位置、または開始位置が指定されていない場合は先頭から検索を開始し、配列の最後に検索を終了します。

アイテムが見つからない場合は-1を返します。

項目が複数回存在する場合、indexOfメソッドは、最初に出現した位置を返します。

注:最初の項目は位置0を持ち、2番目の項目は位置1を持ち、以下同様です。

ヒント:あなたが開始するために、エンドから検索したい場合は、のlastIndexOf()メソッドを使用し

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var a = fruits.indexOf("Apple"); 

の結果は以下のようになります。2

0

あなたは余分な痛みを避けるためにunderscore.js#intersectionを使用することができます書き込み

let prevApplied = []; 

function addbuttonAnimation() { 

    let applied = (document.activeElement.id === 'add-order') ? [].concat(style2) : [].concat(style1) 
    var boolStyleDiff = _.intersection(prevApplied, applied); 

    if (!boolStyleDiff) { 

    return false; //to avoid call to goStyle() 
    } 

    prevApplied = applied; //saved previously applied 
    let x = document.querySelector('#add-order') 

    function goStyle(...applied) { 
    //code 
    } 

    goStyle(...applied) 
} 
+0

私はまだ私のjavascriptとは確信していないので、私は任意のライブラリとフレームワークを使用しないように決心し、私は自分自身をより良いdeveloptすることができます。の痛いハハ:D – Chieftian

+0

そう、あなたはあなた自身の交差論理を書くことができます –

関連する問題