jQuery('#test').addClass('class1');
jQuery('#test').removeClass('class1');
応用について
class属性を追加したり削除したりすることによって、CSSスタイルの適用を動的に変化させることができる。
<style>
.animal .neko{
color:red;
}
.animal .inu{
color:blue;
}
</style>
<script>
function onCssStyle(){
$('#test').addClass('animal');
}
function offCssStyle(){
$('#test').removeClass('animal');
}
</script>
<div id="test" >
<div class="neko">赤ネコ</div>
<div class="inu">青犬</div>
</div>
<input type="button" value="スタイルON" onclick="onCssStyle()" />
<input type="button" value="スタイルOFF" onclick="offCssStyle()" />
<div id="a1" style="background-color:#ffcd42">
黄色いバナナ
<input type="button" id='btn_a1' value="A1ボタン" class="btn btn-primary btn-xs" />
</div>
<div id="a2" style="background-color:#dd5246">
赤いリンゴ
<input type="button" id='btn_a2' value="A2ボタン" class="btn btn-primary btn-xs" />
</div>
<input type="button" value="要素移動テスト" class="btn btn-success" onclick="test1()" />
// 初期化
$(() => {
// ▼クリックイベントを組み込む
$('#btn_a1').click(()=>{
alert('黄色いバナナのボタン')
});
$('#btn_a2').click(()=>{
alert('赤いリンゴのボタン')
});
});
// クリックイベント
function test1(){
$('#a1').insertAfter('#a2');
}
<style>
.red{
color:red;
}
.big{
font-size:2em;
}
</style>
<div id="neko" class="long red big">
ネコにエサをあげてください。
</div>
<input type="button" value="test1" onclick="test1()" class="btn btn-success" />
<input type="button" value="test2" onclick="test2()" class="btn btn-success" />
<input type="button" value="test3" onclick="test3()" class="btn btn-success" />
<input type="button" value="test4" onclick="test4()" class="btn btn-success" />
function test1(){
var obj = jQuery('#neko');
if(obj.hasClass('red')){
obj.removeClass('red');
}else{
obj.addClass('red');
}
}
function test2(){
jQuery('#neko').toggleClass('big');
}
function test3(){
var obj = jQuery('#neko');
if(obj.hasClass('red')){
obj.removeClass('red big');
}else{
obj.addClass('red big');
}
}
function test4(){
var obj = jQuery('.btn-success');
if(obj.hasClass('btn-xs')){
obj.removeClass('btn-xs');
}else{
obj.addClass('btn-xs');
}
}
$("li:contains('ねこ')").css('color', 'red');
<div>ねこ</div>
<div><span>グローリーキャット</span></div>
<ol>
<li>catdog</li>
<li>ねこ</li>
<li>いぬ</li>
<li><strong>大ねこ</strong>は逃げない</li>
</ol>
<input type="text" value="example@example.com" />
<input type="radio" name="test_radio" value="a" />A
<input type="radio" name="test_radio" value="b" />B
<input type="text" value="ゾウ" class="animal" />
<input type="text" value="ゾウカブト" class="musi" />
<input type="text" value="キリン" class="animal" />
<input type="text" value="ダチョウ" class="tori" />
$("input").one('click', (evt) =>{
var inp = $(evt.currentTarget);
if (inp.is(":radio")) {
alert('ラジオ入力です。');
}
if (inp.is(":text")) {
alert('テキストボックス入力です。');
}
if (inp.is(".animal, .tori")) {
alert('脊椎動物です。');
}
if (inp.is(".musi")) {
alert('虫です。');
}
});
HTML
<link href="slick/slick.css" rel="stylesheet">
<link href="slick/slick-theme.css" rel="stylesheet" />
<script src="/note_prg/js/jquery3.js"></script> <!-- jquery-3.3.1.min.js -->
<script src="slick/slick.min.js"></script>
～略～
<style>
#test1 div{
margin:10px;
background-color:#191970;
color:white;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
～ 略 ～
<div id="test1">
<div>
イスラエルの王，ダビデの子，ソロモンの箴言。2 [これは，]人が知恵と懲らしめを知り，理解のことばをわきまえ，3 洞察力，義と裁きと廉直さを与える懲らしめを受け入れ，4 経験のない者たちに明敏さを，若者に知識と思考力を与えるためのものである。
</div>
<div>
賢い者は聴いて，さらに多くの教訓を取り入れ，理解のある者は巧みな指導を得る人である。6 [これは，]箴言と難解なことわざ，賢い者たちの言葉とそのなぞを理解するためである。
</div>
<div>
エホバへの恐れは知識の初めである。知恵と懲らしめをただの愚か者は軽んじた。
</div>
<div>
我が子よ，あなたの父の懲らしめに聴き従え。あなたの母の律法を捨て去ってはならない。
</div>
<div>
それはあなたの頭にとっての優美な花冠であり，あなたののどにとっての立派な首飾りだからである。
</div>
<div>
我が子よ，罪人があなたをたぶらかそうとしても応じてはならない。
</div>
<div>
「ぜひ我々と一緒に来い。血を[流すために]待ち伏せするのだ。罪のない者を正当な理由なしにひそかにねらうのだ。
</div>
<div>
我々はシェオルのように，彼らを生きたまま，坑に下って行く者たちのようにそっくり呑み込もう。
</div>
</div>
JavaScript
$(()=>{
$('#test1').slick({
arrows: true, // 左右のボタンを表示
dots: true, // 下部分にドットを表示
accessibility: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
参考リンク
let elm = jQuery('...略 要素を取得
elm.slick('removeSlide', null, null, true); // 一旦クリアする
elm.html('<div>...略'); // 動的に内容を変更する
elm.slick('refresh');
旧
Demo
$('#test1')[0].slick.refresh();
.slick-slider{
user-select:auto;
}
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script><!-- スマホでもuiでタッチできるようにする(ドラッグ可能にする) -->