jQueryを使用してテキストを変更する

Last Updated:2022年09月15日| , | コメントを残す

この記事では、CSSを使用してテキストを他のフレーズに変える方法を説明しました。 CSSの代わりにjQueryを使用すると、より簡単にテキストを必要に応じて変更することができます。

jQueryを使用してテキストを変更する方法

次のようなスクリプトを使用すると、選択者のテキストコンテンツを設定することになります。

$(selector).text(content)

たとえば、次のようなスクリプトを使用すると、:

$(document).ready(function(){
$("button").click(function(){
$("p").text("안녕하세요!");
});
});

ボタンをクリックすると、 p タグ内のテキストが「こんにちは!」に変わります(デモ).

別の例として、以下のようなHTMLがある場合:

<h1 id="toptitle">プロフィール</h1>

たとえば、複数のタイトルがある場合、タイトルが「プロファイル」の場合にのみ別のフレーズ(「テスト」など)に置き換えたい場合は、次のスクリプトを使用できます。

$(document).ready(function() {
$('#toptitle').text(function(i, oldText) {
return oldText === 'プロフィール' ? '테스트' : oldText;
});
});

または、次のようなスクリプトでも可能です。

var text = $('#toptitle').text();
if (text == 'プロフィール'){
$('#toptitle').text('테스트');
}

あるいは :contains() セレクタを使用することができます。

$('#toptitle:contains("プロフィール")').text("테스트");

次のようにHTMLを使用することも可能です。

$("#btn2").click(function(){
$("#test2").html("<b>안녕하세요!</b>");
});

プロパティを変更する attr() メソッドを使用します。

$("button").click(function(){
$("#w3s").attr("href", "http://www.w3schools.com/jquery");
});
// Reference: w3schools

ここで、実際の動作を確認できます。

Javascriptを/ jQueryテンプレート:

時間を節約したい場合 WordPress プラグインは、jQueryテンプレートなどを販売している CodeCanyonで、比較的低コストで、Javaスクリプト/ jQueryテンプレートは、PHPスクリプトなどのコード、スクリプトを購入することができます。

コードキャニオンで販売されているjavascript / jQueryテンプレート
CodeCanyonで販売されているjavascript / jQueryテンプレート

メモ:


コメントを残す

コメント