কীভাবে jQuery এ একটি বোতামের পাঠ্য পরিবর্তন করবেন?


547

আপনি কীভাবে jQuery এ একটি বোতামের পাঠ্য মানটি পরিবর্তন করবেন? বর্তমানে, আমার বোতামটির পাঠ্য মান হিসাবে 'যুক্ত' রয়েছে এবং ক্লিক করার পরে আমি এটি পরিবর্তন করে 'সংরক্ষণ করুন' এ রাখতে চাই। আমি নীচে এই পদ্ধতিটি চেষ্টা করেছি, তবে এখন পর্যন্ত সাফল্য ছাড়াই:

$("#btnAddProfile").attr('value', 'Save');

3
আসলে আপনার উদাহরণের বোতামটির মান পরিবর্তন করতে কাজ করা উচিত। আমি এটা চেস্টা করেছিলাম এবং এটা কাজও করেছিল. হতে পারে বোতামটির আইডি আলাদা বা টাইপো।
mjspier

এখনও কাজ করে না ... JQuery UI শৈলীগুলি এর কারণ হতে পারে?
ব্যবহারকারী517406

4
সের্গির উত্তর সবচেয়ে ভাল ছিল। এটি এর স্টাইল, প্যাডিং এবং মার্জিনগুলি সরিয়ে না দিয়ে জ্যাকুরি বোতামগুলিতে সঠিকভাবে কাজ করছে।
এএএ

এটি ব্যবহার করুন $ ("# বিটিএনএডডিপ্রোফাইল")। প্রপ ('মান', 'সংরক্ষণ করুন');
পিএইচপি বিকাশকারী

উত্তর:


897

আপনি কোন ধরণের বোতাম ব্যবহার করছেন তার উপর নির্ভর করে

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->

<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

আপনার বোতামটিও একটি লিঙ্ক হতে পারে। আরও নির্দিষ্ট উত্তরের জন্য আপনাকে কিছু HTML পোস্ট করতে হবে।

সম্পাদনা : এগুলি ধরে নিয়ে কাজ করবে যে আপনি .click()অবশ্যই এটি একটি কলটিতে আবদ্ধ করেছেন

সম্পাদনা 2 : একটি মন্তব্য jQuery এর সংস্করণে (1.6 থেকে>) ব্যবহার .propবদলে.attr

সম্পাদনা 3 : আপনি jQuery UI ব্যবহার করছেন, আপনি টেক্সট সম্পত্তি সামঞ্জস্য করার DaveUK এর পদ্ধতি ( নীচে ) ব্যবহার করতে হবে


7
এটি html ('সেভ') ব্যবহার করে কাজ করেছিলাম, আমি খেয়াল করিনি যে আমি আমার বোতামে রানাত = সার্ভারটি সেট করে রেখেছি, এটিই সমস্যাটি সৃষ্টি করছে।
ব্যবহারকারী517406

যেভাবেই আমি এটি কাজ করতে পারি এবং এটিতে আমার jquery ইউআই বোতামটি সঙ্কুচিত করা যায় না?
সিরিয়েনার্থস

2
এটি সম্পর্কে চিন্তা করবেন না। আমি থেকে পরিবর্তিত buttonকরা inputএবং বৃত্তাকার পরিবর্তে পাঠ্য সঙ্গে তালগোল পাকানো আইকনগুলি পরিবর্তন করেছেন। (আমি মনে করি কিছু কিছু
বোঝার

8
আমি যদি এটি করতে পারি তবে আমি এটি হ্রাস করব would আপনার যদি এইটির সাথে সমস্যা হয় তবে দয়া করে ডেভ ইউকের উত্তরটি ব্যবহার করুন । পিএস: আমি অনুমান করি যে বিষয়টি স্পর্শকাতররাও লক্ষ্য করেছে,
ব্যবহারকারীর 66২২২২

3
আরও ভাল: নীচে সের্গেই থেকে উত্তরটি jQuery এবং ভবিষ্যতের প্রুফিংয়ের যথাযথ ব্যবহারের জন্য ব্যবহার করুন: $ (".নির্বাচক")। বাটন ("বিকল্প", "লেবেল", "নতুন পাঠ্য");
সিনকোডেনদা

148

JQuery এ। বাটন () দিয়ে তৈরি বোতামগুলির জন্য ........

অন্যান্য উত্তরগুলি পাঠ্য পরিবর্তন করবে যখন তারা বোতামটির স্টাইলিংকে বিশৃঙ্খলা করবে,

<button id="thebutton">
  <span class="ui-button-text">My Text</span>
</button>

যদি আপনি স্প্যানটি সরান এবং এটি পাঠ্যের সাথে প্রতিস্থাপন করেন (অন্য উদাহরণগুলির মতো) - আপনি স্প্যানটি এবং সম্পর্কিত ফর্ম্যাটটি looseিলা করবেন।

সুতরাং আপনাকে স্প্যান ট্যাগের মধ্যে পাঠ্যটি পরিবর্তন করতে হবে এবং বোতামটি নয়!

$("#thebutton span").text("My NEW Text");

বা (যদি আমার পছন্দ হয় তবে এটি ক্লিক ইভেন্টে করা হচ্ছে)

$("span", this).text("My NEW Text");

4
আপনার এই DOM কাঠামোটি কখনই পরিবর্তিত হবে না এমন আশা করা উচিত নয়। JQuery-UI পদ্ধতিটি লেবেলটি পরিবর্তন করতে আপনাকে দেওয়া (সের্গির উত্তর দেখুন) ব্যবহার করা আরও ভাল।
মাইক ডিসিমোন

80

JQuery ব্যবহার করে "বোতামাইজড" থাকলে বোতামের পাঠ্য পরিবর্তন করার সঠিক উপায়টি হ'ল বাটন () পদ্ধতিটি ব্যবহার করা:

$( ".selector" ).button( "option", "label", "new text" );

3
এটি অন্যান্য পদ্ধতির তুলনায় আমার পক্ষে আরও ভাল কাজ করেছে, যা বোতামটির স্টাইলিংয়ে (বিশেষত বোতামটির আকার) st আমি jQuery UI ডায়ালগ, FWIW- এ একটি বোতাম ব্যবহার করছিলাম।
ডেভ ক্রম্বাচার

8
এটি ডায়ালগের মতো jQuery দিয়ে তৈরি বোতামগুলির জন্য সঠিক উত্তর answer অন্যান্য সমস্ত কিছু jQuery স্টাইলিং ধ্বংস করবে। এটি jQuery উত্পন্ন HTML HTML কাঠামোর উপর নির্ভর করেও এটি করে, যা আরও ভবিষ্যতের প্রমাণ proof
সিনকোডেনদা

এটি এই প্রশ্নের সঠিক উত্তর (মনে হচ্ছে প্রশ্নটি জ্যাকুরি ইউআই বোতাম সম্পর্কিত, মন্তব্যগুলি দেখুন), এটি প্রচার করা উচিত।
পেভ করুন

38

একটি বোতামের পাঠ্য পরিবর্তন করতে কেবল jQuery এর জন্য নিম্নলিখিত লাইনটি সম্পাদন করুন

<input type='button' value='XYZ' id='btnAddProfile'>

ব্যবহার

$("#btnAddProfile").val('Save');

যখন জন্য

<button id='btnAddProfile'>XYZ</button>

এটা ব্যবহার কর

$("#btnAddProfile").html('Save');


এছাড়াও, উদাহরণস্বরূপ jquery দ্বারা তৈরি বোতামগুলির জন্য $('#thing').append($("<button />")....), পাঠ্যটি সেট করতে আপনাকে .html ব্যবহার করতে হবে।
বেনুবার্ড


22

আপনার করা দরকার .button("refresh")

এইচটিএমএল :

<button id='btnviewdetails' type='button'>SET</button>

জেএস :

$('#btnviewdetails').text('Save').button("refresh");

কোনও কারণে, আমি আপনার কোডটি বোতামটি রিফ্রেশ করার জন্য ব্যবহার করার পরে এটি কেবল আমার পক্ষে কাজ করবে, তবে আমি এটিও লক্ষ্য করেছি যে বোতামটির আইকনটি (জিকুয়েরি মোবাইল সিএসএসের অংশ) সতেজ হওয়ার পরে হারিয়ে গেছে (যদিও আপনার সমাধানটি নিকটতমের দ্বারা হয়েছিল আমি পেয়েছি)।
সিয়ারান গ্যালাগার

12

আপনি যদি নিজের বোতামটি বোতামটি রেখেছেন তবে এটি মনে হয় কাজ করবে:

<button id="button">First caption</button>

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);


10

আপনি এর মতো কিছু ব্যবহার করতে পারেন:

$('#your-button').text('New Value');

আপনি এই জাতীয় অতিরিক্ত বৈশিষ্ট্য যুক্ত করতে পারেন:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');

ইনপুট বোতামগুলি কাজ করে না বা বোতামগুলি জমা দেয় না, ভ্যাল () ব্যবহার করুন
অ্যাক্টিভএক্স

8

তুমি ব্যবহার করতে পার

$("#btnAddProfile").text('Save');

যদিও

$("#btnAddProfile").html('Save');

পাশাপাশি কাজ করবে, তবে এটি বিভ্রান্তিকর (এটি এমন ধারণা দেয় যা আপনি কিছু লিখতে পারেন)

$("#btnAddProfile").html('Save <b>now</b>');

তবে অবশ্যই আপনি পারবেন না



5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });

10
প্রশ্ন থেকে অ-কার্যকারী কোডটি পুনরাবৃত্তি করা কোনও উত্তর নয়।
বেনুবার্ড

4

এটি আমার জন্য কাজ এইচটিএমএল:

<button type="button" class="btn btn-primary" id="btnSaveSchedule">abc</button>

JS

$("#btnSaveSchedule").text("new value");

4

$(document).ready(function(){
    $(":button").click(function(){
        $("p").toggle();

    if (this.value=="Add") this.value = "Save";
    else this.value = "Add";

  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<input type='button' value='Add' id='btnAddProfile'>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>


2

আপনি কি একটি আইডির পরিবর্তে আপনার বোতামটি ক্লাস দিয়েছেন? নিম্নলিখিত কোড চেষ্টা করুন

$(".btnSave").attr('value', 'Save');

1
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});

আপনার উত্তর সম্পর্কে কিছু বিবরণ অন্তর্ভুক্ত করুন।
স্টারেক্স

আপনার উত্তর সহ বিশদ অন্তর্ভুক্ত করুন। আপনি এখানে যা করার চেষ্টা করছেন তা আমার কোনও ধারণা নেই।
অনুরাগ



0

এটি ঠিক সঠিক, এটি আমার পক্ষে কাজ করে;

    $('#btnAddProfile').bind('click',function(){
    $(this).attr('value','save');
})

আপনি কি নিশ্চিত যে জকোয়ারি উপলব্ধ এবং আপনার কোডটি সঠিক জায়গায় রয়েছে?



0

সি # তে বোতামের শিষ্টাচারের নাম পরিবর্তন করা।

<button type="submit" name="add" id="btnUpdate" class="btn btn-primary" runat="server" onserverclick="btnUpdate_Click">
Add

btnUpdate.**InnerText** = "Update";
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.