0

cms テーマを作成しました。ライブ デモで表示したいカスタマイズ機能がいくつかあります。基本的には、Javascript スタイルのスイッチャーまたは修飾子を追加したいと考えています。ユーザーがチェックボックスから値を選択するか、タグを選択して、選択した値が html 要素に反映されるようにします。例えば、

私のページコンテナは

<div id="container"> <!--PAGE GOES HERE --> </div>

ユーザーがこれを選択して「配色青」をクリックすると、コンテナにクラス「blue_theme」が追加されます

<div id="container" class="blue_theme" > <!--PAGE GOES HERE --> </div>

また、このようにcssプロパティを直接変更することは可能ですか

/* Base property */
#container{
background:red;
}

ユーザーがこれを選択して「配色青」をクリックした場合、コンテナを

/* Base property */
#container{
background:blue;
}
4

12 に答える 12

0

これを試して：

$(".button").click(function(){
    $("#container").attr('class','custom_class_added');
})

関数に応じて、addClass（）とremoveClass（）も使用できます。

于 2012-09-04T07:05:34.350 に答える
0

のIDを変更する代わりに、クラスを設定し<div>ます。特にID名にスペースが許可されていないためです。

HTML（状態変更時）

<div id="container" class="custom_class_added">

CSS

#container.custom_class_added{
    background: blue;
}
于 2012-09-04T07:06:10.587 に答える
0

クラスを追加するには、addClass（）：

$('#container').addClass('custom_class_added');

cssを変更する場合、css（）：

$('#container').css('color', 'blue');
于 2012-09-04T07:08:15.377 に答える
0

$('#container).css({'background-color' : 'blue'});onchangeイベントで使用します。これは、cssスタイルの部分で機能するはずです。
タグにクラスを追加する部分については、を使用して、タグに$('#container).attr('class', 'custom_class_added');クラス属性を追加します。

selectboxesなどのフォーム要素にこのコードを使用すると、次のようになります。

<select id="mySelectBox">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
        $("#mySelectBox").change(function(){
            $("#theElementYouWant").css({"background-color" : $("#mySelectBox").val()});
        });
    });
</script>

コードを使用するには、タグ$('#container).attr('class', 'custom_class_added');間の任意の場所にコードを配置できます。<script></script>

于 2012-09-04T07:08:51.117 に答える
0

あなたはこのようなことを試みていますか？

解決策1：

HTML：

<div id="container">
    choose theme:
    <input type="radio" name="radio-theme" data-color="red" /> Red
    <input type="radio" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery

$("#container").find("input[type=radio]").on("change", function(){
    var dataTheme = $(this).data("color");
    $("#container").removeAttr("class");
    $("#container").addClass(dataTheme);   
});​

デモ1

解決策2：解決策2：

HTML：

<div id="container">
    choose theme:
    <input type="checkbox" name="radio-theme" data-color="red" /> Red
    <input type="checkbox" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery：

$("#container").find("input[type=checkbox]").on("change", function(){    
    var dataTheme = $(this).data("color");    
    if( $(this).is(":checked") ) {        
        $("#container").removeAttr("class");
        $("#container").addClass(dataTheme);         
    } else {
        $("#container").removeAttr("class"); 
    }  
});​

デモ2

于 2012-09-04T07:13:21.817 に答える
0

これを使って：

$('#bluebttn').click(function(){
    $('#container').removeClass().addClass('blue_theme') ;
});

仮定

あなたの青いボタンの ID は #bluebttn です

青の CSS クラスの名前は blue_theme です

他の色についても繰り返します。

于 2014-08-23T10:45:43.537 に答える
0

ID の代わりにクラスを使用すると、関数と HTML は次のようになります。

HTML:

<ul id="changer">
  <li class="blue">Blue color</li>
  <li class="red">Red color</li>
</ul>
<div id="container"></div>

jQuery

var $container = $('#container');
$('#changer').on('click', 'li', function(){

  var $this = $(this),
      $color = $this.attr('class');

  $container.removeClass().addClass($color);

});
于 2012-09-04T07:18:10.183 に答える
0

クラスを追加または削除したくなく、色を変更したい場合は、これを試すことができます。

   $('#yourbutton').click(function(){
        $('#container').css('background-color', 'blue');
    });
于 2014-08-26T16:39:59.797 に答える
0

jQuery を使用してスタイルを追加したい場合は、次の行に沿って何かを行うことができます。

$('#container').css({
    "background-color" : "blue",
    "color" : "red"
});

または、ユーザーがボタンをクリックしたときにクラスを追加できます。

<label for="blue_theme">Blue</label>
<input type="checkbox" id="blue_theme"/>
<div id="container"></div>​

$("#blue_theme").click(function() {
    $("#container").attr('class', 'blue_theme');
})​

例）http://jsfiddle.net/charlescarver/jp8UL/

また、ページの読み込み時にスタイルを維持したい場合は、Cookie を設定することもできます。GitHubのjQuery Cookieを見てみましょう。

于 2012-09-04T07:16:36.463 に答える
0

このようなもの: http://jsbin.com/EKEYOfEl/4/

HTML :

<select class="themeSwitch">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>     
<div id="container"> <!--PAGE GOES HERE --> </div>

CSS :

#container{
    background:red;
    height:100px;
    width:100%;
}

.custom_class_added{
    background:blue !important;
}

JS :

$(document).on("change", ".themeSwitch", function(){
    var theme = $(this).val();
    if(theme=="red"){     
        $("#container").removeClass("custom_class_added");
    }else if(theme=="blue"){
        $("#container").addClass("custom_class_added");
    }
});

選択ボックスの値を変更することで、css クラスをトグルするだけで背景色を簡単に変更できます。

于 2014-01-29T12:04:38.777 に答える
0

この純粋なJavaScriptを使用してそれを行うことができます

colorOption.onchange = function() {
    var colorValue = option[colorOption.selectedIndex].value;
        template.style.background = colorValue;
        template.innerHTML = template.innerHTML;
};

このjsfiddleを使用できます

于 2014-08-20T06:28:39.203 に答える