2017-12-13 98 views
5

पर विफल रहता है मेरे पास कोड का एक टुकड़ा है जहां मेरे पास दो बटन हैं और जब मैं एक बटन दबाता हूं तो मैं चाहता हूं कि एक div y-axis पर फ़्लिप करें और जब मैं अन्य बटन दबाता हूं तो मैं वही चाहता हूं एक्स-अक्ष पर फ़्लिप करने के लिए div। यह ठीक काम करता है जब मैं वाई-अक्ष के लिए बटन का उपयोग करता हूं भले ही पिछली फ्लिप एक्स-अक्ष पर थी। लेकिन जब मैं वाई-अक्ष से x-axis में स्विच करना चाहता हूं तो मुझे x बटन को दो बार दबाए जाने की आवश्यकता है क्योंकि पहली बार कुछ भी नहीं होता है।jQuery फ्लिप प्लगइन स्विच फ़ंक्शन स्विच

तो वांछित व्यवहार है:

क्लिक y बटन y- अक्ष पर div फ्लिप।

एक्स-एक्स पर एक्स एक्स फ्लिप पर क्लिक करें।

वर्तमान व्यवहार है:

क्लिक y बटन div y- अक्ष पर flips।

क्लिक करें x बटन कुछ भी नहीं होता एक्स-अक्ष पर फिर से एक्स बटन पर क्लिक करें।

मुझे नहीं पता कि समस्या क्या है, यह अब तक का सबसे अच्छा है। सभी मदद की सराहना की जाती है।

var ax = 'x'; 
 
$(document).ready(function() { 
 

 
    $('#card').flip({ 
 
    trigger: 'manual', 
 
    axis: 'x' 
 
    }); 
 
    $('#left').click(function() { 
 
    if (ax != 'y') { 
 
     $("#card").flip({ 
 
     axis: 'y' 
 
     }); 
 
     $("#card").on('flip:change', function() { 
 
     $('#card').flip('toggle'); 
 
     }); 
 
     ax = 'y'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
    $('#right').click(function() { 
 
    if (ax != 'x') { 
 
     $("#card").flip({ 
 
     axis: 'x' 
 
     }); 
 
     $("#card").on('flip:change', function() { 
 
     $('#card').flip('toggle'); 
 
     }); 
 
     ax = 'x'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
});
#card { 
 
    position: fixed; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 
<button id="left">y</button> 
 
<button id="right">x</button> 
 
<div id="card"> 
 
    <div class="front">Front content</div> 
 
    <div class="back">Back content</div> 
 
</div>

उत्तर

1

यहाँ आप एक समाधान

var ax = 'x'; 
 
$(document).ready(function() { 
 

 
    $('#card').flip({ 
 
    trigger: 'manual', 
 
    axis: 'x' 
 
    }); 
 
    
 
    
 
    $("#card").on('flip:change', function() { 
 
    $('#card').flip('toggle'); 
 
    }); 
 
    
 
    $('#left').click(function() { 
 

 
    if (ax != 'y') { 
 
     $("#card").flip({ 
 
     axis: 'y' 
 
     }); 
 
     
 
     ax = 'y'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
    $('#right').click(function() { 
 
    if (ax != 'x') { 
 
     $("#card").flip({ 
 
     axis: 'x' 
 
     }); 
 
     
 
     ax = 'x'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
});
#card { 
 
    position: fixed; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 
<button id="left">y</button> 
 
<button id="right">x</button> 
 
<div id="card"> 
 
    <div class="front">Front content</div> 
 
    <div class="back">Back content</div> 
 
</div>

के साथ जाने के लिए आप क्लिक करें घटना के बाहर flip:change रखना चाहिए।

आशा यह आप में मदद मिलेगी।

+1

आप विस्तार से बता सकता है कि तुम क्या यह काम ?, और हो सकता है की व्याख्या क्या त्रुटि के कारण बनाने के लिए किया था? – FutureCake

+1

@FutureCake मैंने टिप्पणी को जोड़ा, 'फ्लिप: चेंज' फ़ंक्शन क्लिक ईवेंट के बाहर होना चाहिए। – Shiladitya

+0

कभी-कभी पहला क्लिक अच्छा नहीं होता है –

1

आपने प्रत्येक क्लिक के साथ flip:change ईवेंट को कई बार बाध्यकारी समाप्त कर दिया। वाई को दो बार क्लिक करने के बाद क्लिक करने पर x को दो बार फ़्लिप करने का कारण बन गया। इसलिए ऐसा लगता है कि कुछ भी नहीं हो रहा है।

$('#right').click(function() { की शुरुआत में debugger; जोड़ने और आपके कोड को डीबग करने के लिए कंसोल का उपयोग करते समय आप यह देख सकते हैं कि हो रहा है।

वैसे भी, ईवेंट बाध्यकारी वाले लोगों को जोड़ना केवल वही है जो आपको चाहिए।

अपने कोड में $("#card").on('flip:change', function() { के सभी उदाहरणों को हटाकर और केवल एक बार जोड़कर, समस्या को हल करता है।

इस उदाहरण में मैंने इसे आपके कोड के नीचे जोड़ा।

var ax = 'y'; 
 
$(document).ready(function() { 
 
    $('#card').flip({ 
 
    trigger: 'manual', 
 
    axis: 'y' 
 
    }); 
 
    $('#left').click(function() { 
 
    //debugger; 
 
    if (ax != 'y') { 
 
     $("#card").flip({ 
 
     axis: 'y' 
 
     }); 
 
     ax = 'y'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
    $('#right').click(function() { 
 
    //debugger; 
 
    if (ax != 'x') { 
 
     $("#card").flip({ 
 
     axis: 'x' 
 
     }); 
 
     ax = 'x'; 
 
    } else { 
 
     $("#card").flip('toggle'); 
 
    } 
 
    }); 
 
    // Only bind ones. 
 
    $("#card").on('flip:change', function() { 
 
    $('#card').flip('toggle'); 
 
    }); 
 
});
#card { 
 
    position: fixed; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 
<button id="left">y</button> 
 
<button id="right">x</button> 
 
<div id="card"> 
 
    <div class="front">Front content</div> 
 
    <div class="back">Back content</div> 
 
</div>

2

आप समस्या को ओवर-द जटिल। यहां documentation से प्रेरित समाधान है। आपको केवल flip पर कॉल करने के लिए अक्ष पर क्लिक करने के लिए flip पर कॉल करना है, और flip:change ईवेंट को सुनने के लिए हर बार निकाल दिया जाता है जिसे आप flip पर कॉल करते हैं ताकि वास्तव में इसे फ़्लिप करने के लिए अभिविन्यास को बदल दिया जा सके।

// Configure it to be manually flipped 
 
$("#card").flip({ 
 
    trigger: 'manual' 
 
}); 
 

 
// Change the axis 
 
$('#left').click(function() { 
 
    $("#card").flip({ 
 
    axis: 'y' 
 
    }); 
 
}); 
 

 
$('#right').click(function() { 
 
    $("#card").flip({ 
 
    axis: 'x' 
 
    }); 
 
}); 
 

 
// Toggle it on change 
 
$("#card").on('flip:change', function() { 
 
    $('#card').flip('toggle'); 
 
});
#card { 
 
    position: fixed; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 

 
<button id="left">y</button> 
 
<button id="right">x</button> 
 

 
<div id="card"> 
 
    <div class="front">Front content</div> 
 
    <div class="back">Back content</div> 
 
</div>