この記事では、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スクリプトなどのコード、スクリプトを購入することができます。
コメントを残す