jquery পরিবর্তন শ্রেণীর নাম

336

আমি টিডি ট্যাগের আইডি দিয়ে টিডি ট্যাগের শ্রেণি পরিবর্তন করতে চাই:

<td id="td_id" class="change_me"> ...

আমি অন্য কিছু ডোম অবজেক্টের ক্লিক ইভেন্টের ভিতরে এটি করতে সক্ষম হতে চাই। আমি কীভাবে টিডি আইডি ধরব এবং এর ক্লাসটি পরিবর্তন করব?

jquery css

— aeq
সূত্র

704

আপনি ক্লাসটি সেট করতে পারেন (এটি যা ছিল তা নির্বিশেষে ) এটি ব্যবহার করে .attr():

$("#td_id").attr('class', 'newClass');

আপনি যদি কোনও ক্লাস যুক্ত করতে চান তবে এর.addclass() পরিবর্তে ব্যবহার করুন:

$("#td_id").addClass('newClass');

বা ক্লাসের অদলবদলের জন্য একটি ছোট উপায় .toggleClass():

$("#td_id").toggleClass('change_me newClass');

এখানে বিশেষ করে classগুণাবলীর জন্য jQuery পদ্ধতির সম্পূর্ণ তালিকা রয়েছে ।

— নিক ক্র্যাভার
সূত্র

আরে @ নিক, একটি ইভেন্ট হ্যান্ডলার যুক্ত করুন যা প্রথম টিডি পিতামাতাকে খুঁজে পায় [ var $td = $(this).parents('td:first')] তারপরে এটি আইডি [ var id = $td.attr('id');] এবং ক্লাসও [ ] পেয়েছে var class = $td.attr('class');কারণ তিনি

— টিডিটির

@ Bob - আমি অনুসরণ করি না, আপনি অন্য কোথা থেকে এগুলি পাচ্ছেন? এই একজন তার কাছে এলিমেন্টটির আইডি রয়েছে :) এছাড়াও কোনও পিতামাতাকে পেতে আপনি এর .closest('td')পরিবর্তে ব্যবহার করতে পারেন .parents('td:first'):)

— নিক ক্র্যাভার

1

তার শেষ বাক্য:

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

- সম্ভবত আমি এটি ভুল পাঠ করছি, সম্ভবত তার মানে ক্লাস পরিবর্তন করতে

— টিডি'র

1

@ Bob - ঠিক আছে ... অন্য কোনও ডিওএম অবজেক্ট, আপনি ধরে<td>

— নিচ্ছেন

মনে রাখবেন যে change_meঅংশটি toggleClass()

— alচ্ছিক

93

আমি মনে করি আপনি এটি সন্ধান করছেন:

$('#td_id').removeClass('change_me').addClass('new_class');

— Fosco
সূত্র

32

আমি মনে করি তিনি একটি শ্রেণীর নাম প্রতিস্থাপন করতে চান।

এরকম কিছু কাজ করবে:

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

http://monstertut.com/2012/06/use-jquery-to- بدل-css-class/ থেকে

— নাবিক
সূত্র

তবে তিনি এটি অন্য কোনও ডোম অবজেক্টের ক্লিক ইভেন্টের ভিতরে করতে চেয়েছিলেন

— কীসার

9

আপনি এটি করতে পারেন: $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); অথবা আপনি এটি করতে পারেন

$("#td_id").removeClass('Old_class').addClass('New_class');

— আলিরেজা মাসালি
সূত্র

6

আপনি অ্যাডক্লাস বা টগলক্লাস পরীক্ষা করে দেখতে পারেন

— কার্ল জোহান
সূত্র

6

এটি ক্লিক করার সাথে সাথে আপনি এটি পরিবর্তন করতে চান ... আমাকে পুরো প্রক্রিয়াটিতে যেতে দিন। আসুন ধরে নেওয়া যাক আপনার "বহিরাগত ডোম অবজেক্ট" একটি নির্বাচনের মতো একটি ইনপুট:

এই এইচটিএমএল দিয়ে শুরু করা যাক:

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

কিছু খুব বেসিক সিএসএস:

#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

এবং একটি jQuery ইভেন্ট সেট আপ করুন:

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

এখন, যখনই আপনি নির্বাচন থেকে কিছু বাছাই করেন, এটি স্বয়ংক্রিয়ভাবে মিলে যাওয়া পাঠ্যের সাথে একটি ঘর আবিষ্কার করবে, আপনাকে পুরো আইডি-ভিত্তিক প্রক্রিয়াটি নষ্ট করতে দেবে। অবশ্যই, আপনি যদি সেভাবে এটি করতে চান তবে আপনি স্ক্রিপ্টটি সহজেই বলে মানগুলির চেয়ে আইডি ব্যবহার করতে পরিবর্তন করতে পারেন

.filter("#"+useVal)

এবং যথাযথভাবে এইডগুলি যোগ করার বিষয়টি নিশ্চিত করুন। আশাকরি এটা সাহায্য করবে!

— Trafalmadorian
সূত্র

4

সম্পাদনা করুন:

যদি আপনি বলছেন যে আপনি এটিকে কোনও নেস্টেড উপাদান থেকে পরিবর্তন করছেন তবে আপনার আইডি লাগবে না। পরিবর্তে আপনি এটি করতে পারেন:

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

আসল উত্তর:

$('#td_id').removeClass('change_me').addClass('some_other_class');

আরেকটি বিকল্প হ'ল:

$('#td_id').toggleClass('change_me some_other_class');

— user113716
সূত্র

আমি মনে করি না যে ওপি এর ভিতরে রয়েছে <td>, যদিও সে হতে পারে সাবধানতার সাথে পুনরায় পড়ুন :)

— নিক ক্র্যাভার

@ নিক - হ্যাঁ, আমি আপডেটটি আবার যুক্ত করেছিলাম কারণ আমি আবার এটি পড়েছি এবং দেখেছি ওপি "আমি কীভাবে টিডির আইডি ধরব এবং পরিবর্তন করব ..." জিজ্ঞাসা করছে । এটি আমাকে বিশ্বাস করতে পরিচালিত করেছিল যে আইডিটিতে ওপির কোনও হ্যান্ডেল নেই, যা আমার আসল উত্তরটি খুব সহায়ক নয়। এটি দেওয়া, আমি হ্যান্ডলারের সাথে উপাদানটি বাসা বেধে আছে ধরে নিচ্ছি। তবে এটি অবশ্যই একটি অনুমান।

— ব্যবহারকারী 113716

2

আপনার ইতিমধ্যে একটি ক্লাস রয়েছে এবং কোনও ক্লাস যুক্ত করার বিরোধিতা করার সাথে ক্লাসগুলির মধ্যে বিকল্পের প্রয়োজন রয়েছে এমন ইভেন্টে, আপনি ইভেন্টগুলি টগল করতে পারেন:

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

— lentyai
সূত্র

2

$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});

— প্রভু
সূত্র

1

এই পদ্ধতিটি আমার পক্ষে ভাল কাজ করে

$('#td_id').attr('class','new class');

— পুটেরাফেক্স এফএক্স
সূত্র

এটি সম্পর্কে কিছু বিবরণ দিন।

— বিমান

0

jquery ব্যবহার করে ক্লাস পরিবর্তন করুন

এটা চেষ্টা কর

$('#selector_id').attr('class','new class');

আপনি এই কোয়েরিটি ব্যবহার করে কোনও বৈশিষ্ট্যও সেট করতে পারেন

$('#selector_id').attr('Attribute Name','Attribute Value');

— কুমারকে ভালোবাসেন
সূত্র

-1

ক্লাসের নাম পরিবর্তন করার জন্য আমি .প্রপটিকে আরও ভালভাবে ব্যবহার করেছি এবং এটি পুরোপুরি কাজ করেছে:

$(#td_id).prop('className','newClass');

এই কোডের রেখার জন্য আপনাকে কেবল নতুন ক্লাসের নামটি পরিবর্তন করতে হবে, এবং অবশ্যই উপাদানটির আইডি, পরবর্তী উদাহরণে: আদর্শিক ইউরোপ

$(#idelementinyourpage).prop('className','newClass');

যাইহোক, আপনি যখন কোনও উপাদানটিতে কোন স্টাইলটি প্রয়োগ করা হয়েছে তা সন্ধান করতে চান, আপনার পৃষ্ঠাটি প্রদর্শিত হবে যখন আপনি কেবল আপনার ব্রাউজারে F12 ক্লিক করুন, এবং তারপরে আপনি যে উপাদানটি দেখতে চান সেটি ডিওএম এক্সপ্লোরারের ট্যাবে নির্বাচন করুন। স্টাইলগুলিতে আপনি এখন দেখতে পাচ্ছেন কোন উপাদানগুলিতে আপনার উপাদানটি প্রয়োগ করা হয় এবং কোন পাঠ থেকে এটি পড়তে পারে।

— আলেকিস গাসান
সূত্র