যদি আমার ক্লাস থাকে .এ এবং ক্লাস। বি এবং বোতাম ক্লিকের মধ্যে স্যুইচ করতে চান, jQuery এর জন্য একটি দুর্দান্ত সমাধান কি? আমি এখনও বুঝতে পারি না কিভাবে toggleClass()কাজ করে।
এটি onclick=""ইভেন্টে রাখার জন্য কোনও ইনলাইন সমাধান আছে ?
যদি আমার ক্লাস থাকে .এ এবং ক্লাস। বি এবং বোতাম ক্লিকের মধ্যে স্যুইচ করতে চান, jQuery এর জন্য একটি দুর্দান্ত সমাধান কি? আমি এখনও বুঝতে পারি না কিভাবে toggleClass()কাজ করে।
এটি onclick=""ইভেন্টে রাখার জন্য কোনও ইনলাইন সমাধান আছে ?
উত্তর:
যদি আপনার উপাদানটি Aশুরু থেকে শ্রেণি উন্মোচিত করে তবে আপনি লিখতে পারেন:
$(element).toggleClass("A B");এটি ক্লাসটি সরিয়ে ক্লাস Aযুক্ত করবে B। আপনি যদি আবার এটি করেন তবে এটি ক্লাসটি সরিয়ে দেবে Bএবং ক্লাস পুনর্বহাল করবে A।
আপনি যদি উভয় শ্রেণীর উদ্ভাসিত উপাদানগুলির সাথে মেলে করতে চান তবে আপনি একাধিক শ্রেণীর নির্বাচক ব্যবহার করতে পারেন এবং লিখতে পারেন:
$(".A, .B").toggleClass("A B");var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
এখানে একটি সরলীকৃত সংস্করণ দেওয়া হয়েছে: ( যদিও মার্জিত নয় তবে সহজে অনুসরণযোগ্য )
$("#yourButton").toggle(function()
{
$('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'
}, function() {
$('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'
});বিকল্পভাবে, অনুরূপ সমাধান:
$('#yourbutton').click(function()
{
$('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});toggleমধ্যে jQuery 2.0 অনুমোদিত হয়নি করা হয়
আমি DRY কাজ করার জন্য একটি jQuery প্লাগইন তৈরি করেছি:
$.fn.toggle2classes = function(class1, class2){
if( !class1 || !class2 )
return this;
return this.each(function(){
var $elm = $(this);
if( $elm.hasClass(class1) || $elm.hasClass(class2) )
$elm.toggleClass(class1 +' '+ class2);
else
$elm.addClass(class1);
});
};আপনি এখানে এটি চেষ্টা করে দেখতে পারেন, এটি অনুলিপি করে কনসোলে চালাতে পারেন এবং তারপরে চেষ্টা করুন:
$('body').toggle2classes('a', 'b');আপনার onClickঅনুরোধ:
<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>এটি ব্যবহার করে দেখুন: https://jsfiddle.net/v15q6b5y/
কেবল জেএসলা লা jQuery :
$('.selector').toggleClass('A', !state).toggleClass('B', state);এখানে আরও একটি 'অপ্রচলিত' উপায়।
এই দৃশ্যের উদাহরণটি এমন বোতাম হতে পারে যা ক্লাসে অন্য একটি উপাদানকে সরিয়ে রাখতে হবে (একটি পাত্রে ট্যাব বলুন)।
// 1: define the array of switching classes:
var types = ['web','email'];
// 2: get the active class:
var type = $(mybutton).prop('class');
// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);সহজ সমাধান হ'ল toggleClass()পৃথকভাবে উভয় শ্রেণীর কাছে।
ধরা যাক আপনার একটি আইকন রয়েছে:
<i id="target" class="fa fa-angle-down"></i>নিম্নলিখিতগুলির মধ্যে টগল করতে fa-angle-downএবং fa-angle-upকরতে:
$('.sometrigger').click(function(){
$('#target').toggleClass('fa-angle-down');
$('#target').toggleClass('fa-angle-up');
});আপনি যেহেতু প্রতিটি সময় উভয় টগল fa-angle-downনা করে শুরুতে আমরা যেহেতু শুরুতে ছিলাম fa-angle-up, তাই একটির জন্য অন্যটির উপস্থিতির জন্য ছেড়ে যায়।
জ্যাকুরির সাথে দুটি শ্রেণি 'এ' এবং 'বি' এর মধ্যে টগল করুন।
'(' # selecor_id ')। টগলক্লাস ("এ বি");
onclick="") খারাপ। আপনি কেন সঠিক ইভেন্ট হ্যান্ডলারটি নিবন্ধিত করতে jQuery ব্যবহার করবেন না (বা যদি আপনার একই হ্যান্ডলারের সাথে প্রচুর উপাদান থাকে তবে কোনও প্রতিনিধি / লাইভ ইভেন্ট)