クラス名を変更するjQuery attr（）メソッド

Question

ドロップダウンフォームからオプションを選択したときに、attr（）jQueryメソッドを使用してh1要素のクラス名を変更しようとしています。クラス名を変更して別のCSSプロパティ（フォント）にアクセスするようにします

私はDOMをさらに深く掘り下げてクラスを変更するつもりはないと思いますか？

$('h1').attr('class', fontChange);

function myFontStyle() { 
 
    $('#font').on("change", function() { 
 
    var fontChange = this.value 
 
    //console.log(this.value); 
 

 
    $('h1').attr('class', fontChange); 
 
    console.log('h1 has now class: ', $('h1').attr('class')) 
 
    }); 
 
    
 
    
 
} 
 
myFontStyle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="font">Choose font</label> 
 
<select name="font" id="font"> 
 
    <option value="handwriting">Handwriting</option> 
 
    <option value="sketch">Sketch</option> 
 
    <option value="print">Print</option> 
 
</select> 
 

 
<div class="card celadonBackground"> 
 
    <div id="coverImage"> 
 
    <img src="assets/birthday.jpg"/> 
 
    </div> 
 
    <div class="noBorder"> 
 
    <h1 class="sketch">Happy birthday to you</h1> 
 
    </div> 
 
</div>

Answer 1

変更$('h1').attr('class', +fontChange);主に、.attr()メソッドは、クラスの操作のためのものではありません

function myFontStyle() { 
    $('#font').on("change", function() { 
    var fontChange = this.value 
    console.log(this.value); 

    $('h1').attr('class', fontChange); 
    }); 
} 
myFontStyle(); 

https://jsfiddle.net/zu2ku6w8/

Answer 2

構文エラーに

function myFontStyle() { 
 
    $('#font').on("change", function() { 
 
    var fontChange = this.value 
 
    console.log(this.value); 
 
    $('h1').attr('class', + fontChange); 
 
    }); 
 
} 
 
myFontStyle();

.handwriting{ 
 
    font-family: 'Pacifico', cursive; 
 
} 
 
.sketch{ 
 
    font-family: 'Fredericka the Great', cursive; 
 
} 
 
.print{ 
 
    font-family: 'Sigmar One', cursive; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="font">Choose font</label> 
 
<select name="font" id="font"> 
 
    <option value="handwriting">Handwriting</option> 
 
    <option value="sketch">Sketch</option> 
 
    <option value="print">Print</option> 
 
</select> 
 

 
<div class="card celadonBackground"> 
 
    <div id="coverImage"> 
 
    <img src="assets/birthday.jpg"/> 
 
    </div> 
 
    <div class="noBorder"> 
 
    <h1 class="sketch">Happy birthday to you</h1> 
 
    </div> 
 
</div>

Answer 3

。用途：

$(selector).addClass('className') for adding class to element(s) 
$(selector).removeClass('className') for removing class from element(s) 
$(selector).toggleClass('className') for toggling class appereance in element(s) 

Answer 4

あなたはjQueryのバージョンに応じて、使用attrまたは小道具のいずれかのことができます。

$(selector).attr('class', 'className'); // jQuery < 1.6 
$(selector).prop('class', 'className'); // jQuery >= 1.6 

は、既存のクラスにクラスを追加するには

var classes = $(selector).prop('class'); 
$(selector).prop('class', classes + ' className'); 

は、クラスを削除するには

var classes = $(selector).prop('class').replace('notNeededClass', ''); 
$(selector).prop('class', classes); 

jQuer yが直接

$(selector).addClass('className'); 
$(selector).removeClass('className'); 
$(selector).toggleClass('className'); 

Answer 5

$("h1").attr('class', fontChange); 

または

$("h1").addClass(fontChange); 

をclassManipulationを提供しています、あなたは、詳細を表示することができ、変数の前に `+`使用する理由

http://api.jquery.com/category/manipulation/class-attribute/