খাঁটি জাভাস্ক্রিপ্টে আমি কীভাবে কোনও উপাদানটির ক্লাস টগল করব?

Question

আমি এই jQuery কোডটি (যা প্রতিক্রিয়াশীল মেনু বিভাগে ব্যবহৃত হয়) খাঁটি জাভাস্ক্রিপ্টে রূপান্তর করার জন্য একটি উপায় খুঁজছি।

যদি এটি কার্যকর করা কঠিন হয় তবে অন্যান্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করা ঠিক আছে।

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

Comments

stackoverflow.com/questions/195951/…

— জোহান

document.getElementById("menu").classList.toggle("hidden-phone"):-)

— বার্গি

শ্রেণি তালিকা কিছু ব্রাউজার দ্বারা সমর্থিত নয়: caniuse.com/classlist

— কেভিন হুইটেকার

আরে @ ম্যাক্স, ইতিমধ্যে একটি উত্তর চয়ন করতে চান?

— মাইকমেকানা

Answer 1

2014 এর উত্তর : classList.toggle()মানক এবং বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত ।

পুরানো ব্রাউজারগুলি ক্লাসলিস্ট.টোগল () এর জন্য শ্রেণি-তালিকা.জ ব্যবহার করতে পারে :

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

অন্যদিকেwindow , আপনার আইডি ব্যবহার করা উচিত নয় ( তারা জেএস বস্তুর মধ্যে গ্লোবালগুলি ফাঁস করে )।

Comments

আমরা যদি আইডি ব্যবহার করতে না পারি, তবে সিএ কীভাবে করব?

— গোকু

তবে, তবে আমাদের পুরাতন আইডিগুলির পরিবর্তে একই ক্লাসের পরিমাণ থাকবে এবং var myList = document.getElementsByClassName ("abc") এর মতো কিছু ব্যবহার করব?

— গোকু

@ গোকু ক্লাস উইন্ডো অবজেক্টের নীচে উপস্থিত হয় না। কেবল আইডিই করে। দেখুন 2ality.com/2012/08/ids-are-global.html

— mikemaccana

দ্বিতীয় প্যারামিটার ব্যতীত IE10 এবং IE11 দ্বারা সমর্থিত

— রাডার এর নীচে

তোমাকে অনেক ধন্যবাদ! এটি এখন কাজ করছে :) আমি লুপের জন্য আরও বিকল্প যুক্ত করছি: var All = document.querySelectorAll ('। মেনু'); (var i = 0; i <All.length; i ++) for All [i] .classList.toggle ('লুকানো ফোন'); }

— নীল ট্রাম

Answer 2

ES6 এর সাথে সমাধানটি এখানে প্রয়োগ করা হয়েছে

const toggleClass = (el, className) => el.classList.toggle(className);

ব্যবহার উদাহরণ

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

Comments

ES6 দুর্দান্ত, তবে এই সমাধানটি অন্য বিদ্যমান উত্তরগুলির তুলনায় কেবল 'ডকুমেন্ট.কোয়ারী নির্বাচনকারী' এবং 'এলিমেন্ট.ক্লাসলিস্ট.টোগল' ব্যবহার করছে।

— মাইকম্যাকানা

কোনও সমাধান বৈধ নয় যদি এটি "বিক্রেতা ভিত্তিক" হয়, ইন্টারনেট ওপেন-স্ট্যান্ডার্ড-ভিত্তিক ।

— পিটার ক্রাউস

এটি বহু সংখ্যক ফাইলের সমাধান নয়। স্বেচ্ছাসেবীর সমস্ত প্রশ্নের সাথে কাজ করে না (কমপক্ষে এফএফ-তে) সুতরাং যারা একাধিক উপাদানগুলিতে ক্লাস টগল করতে চান তাদের জন্য পড়ুন :-) (আমি প্রথমে পড়িনি - এইভাবে আমার মন্তব্য!)

— কেভ ১1০7

Answer 3

এই উদাহরণটি একবার দেখুন: জেএস ফিডল

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

Comments

"রেড" এর পরে যদি আমার "রেডআউটার" নামক ক্লাস হয় তবে কী হবে?

— টিফনি লো

Answer 4

এটি আই এর পূর্ববর্তী সংস্করণগুলিতেও কাজ করে।

function toogleClass(ele, class1) {
  var classes = ele.className;
  var regex = new RegExp('\\b' + class1 + '\\b');
  var hasOne = classes.match(regex);
  class1 = class1.replace(/\s+/g, '');
  if (hasOne)
    ele.className = classes.replace(regex, '');
  else
    ele.className = classes + class1;
}

.red {
  background-color: red
}
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}

<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>

<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>

Comments

\bশব্দ সীমানা CSS শ্রেণীর নাম পৃথককারীদের সাথে সামঞ্জস্যপূর্ণ নয়। উদাহরণস্বরূপ এটি ক্লাসের নামটিতে ড্যাশ ("-") চর থাকলে এটি কাজ করে না: বিটিএন, বিটিএন-লাল উভয়ই মিলবে '\\b' + 'btn' + '\\b'!!

— এস। সরপুশন

Answer 5

এটি সম্ভবত আরও সংহত:

function toggle(element, klass) {
  var classes = element.className.match(/\S+/g) || [],
      index = classes.indexOf(klass);

  index >= 0 ? classes.splice(index, 1) : classes.push(klass);
  element.className = classes.join(' ');
}

Answer 6

এটি চেষ্টা করুন (আশা করি এটি কার্যকর হবে):

// mixin (functionality) for toggle class 
function hasClass(ele, clsName) {
    var el = ele.className;
    el = el.split(' ');
    if(el.indexOf(clsName) > -1){
        var cIndex = el.indexOf(clsName);
        el.splice(cIndex, 1);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
    else {
        el.push(clsName);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
}

// get all DOM element that we need for interactivity.

var btnNavbar =  document.getElementsByClassName('btn-navbar')[0];
var containerFluid =  document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');

// on button click job
btnNavbar.addEventListener('click', function(){
    hasClass(containerFluid, 'menu-hidden');
    hasClass(menu, 'hidden-phone');
})`enter code here`

Answer 7

ক্লাসনেমে বিভাজন ("") ব্যবহার করে আইই> = 9 এর জন্য এখানে একটি কোড রয়েছে:

function toggleClass(element, className) {
    var arrayClass = element.className.split(" ");
    var index = arrayClass.indexOf(className);

    if (index === -1) {
        if (element.className !== "") {
            element.className += ' '
        }
        element.className += className;
    } else {
        arrayClass.splice(index, 1);
        element.className = "";
        for (var i = 0; i < arrayClass.length; i++) {
            element.className += arrayClass[i];
            if (i < arrayClass.length - 1) {
                element.className += " ";
            }
        }
    }
}

Answer 8

আপনি যদি দেশীয় সমাধান ব্যবহার করে কোনও ক্লাসে কোনও উপাদানকে টগল করতে চান তবে আপনি এই পরামর্শটি চেষ্টা করতে পারেন। আমি এটিকে উপাদানটির সাথে বা অন্য ক্লাস ছাড়াই বিভিন্ন ক্ষেত্রে স্বাদ পেয়েছি এবং আমি মনে করি এটি বেশ কার্যকর হয়েছে:

(function(objSelector, objClass){
   document.querySelectorAll(objSelector).forEach(function(o){
      o.addEventListener('click', function(e){
        var $this = e.target,
            klass = $this.className,
            findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g');

        if( !findClass.test( $this.className ) )
            if( klass ) 
                $this.className = klass + ' ' + objClass;
            else 
                $this.setAttribute('class', objClass);
        else 
        {
            klass = klass.replace( findClass, '' );
            if(klass) $this.className = klass;
            else $this.removeAttribute('class');
        }
    });
  });
})('.yourElemetnSelector', 'yourClass');