ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

この記事では、CSSを使用してテキストを他のフレーズに変える方法を説明しました。 CSSの代わりに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テンプレート

メモ:



コメントを残す

コメント