Jquery Script не работает с Bootstrap

У меня проблема с скриптом JQuery, его просто нужно изменить размер шрифта из опций выбора, и он не работает, но если я удалю ссылку на загрузку, мой скрипт работает. Какая проблема может быть?Jquery Script не работает с Bootstrap

Html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Generate Html with Jquery</title> 
    <link rel="stylesheet" href="style.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="container"> 
     <div class="main_text"> 
      <h1>Change Headings</h1> 
     </div> 


     <select id="selection"> 
      <option value="h1">H1</option> 
      <option value="h2">H2</option> 
      <option value="h3">H3</option> 
      <option value="h4">H4</option> 
      <option value="h5">H5</option> 
     </select> 

     <div class="color_picker"> 
      <h3>Choose Text Color</h3> 
      <input type="color" id="color_picker"> 
     </div> 

     <div class="change_font"> 
      <h3>Change Font</h3> 
      <select id="select_font"> 
       <option value="Sans-serif">Sans-serif</option> 
       <option value="Monospace">Monospace</option> 
       <option value="Serif">Serif</option> 
       <option value="Fantasy">Fantasy</option> 
       <option value="Verdana">Verdana</option> 
       <option value="Impact">Impact</option> 
      </select> 
     </div> 

     <div class="change_size"> 
      <h3>Font Size</h3> 
      <select id="change_font_size"> 
       <option value="14">14</option> 
       <option value="18">18</option> 
       <option value="22">22</option> 
       <option value="24">24</option> 
       <option value="26">26</option> 
      </select> 
     </div> 

    </div> 


    <script src="jquery-2.1.4.min.js"></script> 
    <script src="main.js"></script> 
</body> 
</html>

Jquery

$(function() { 

    $('#selection').change(function() { 
     var tag = $(this).val(); 
     $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">"); 
    }); 

    $('#color_picker').change(function() { 
     var color_p = $(this).val(); 
     $('.main_text').css("color", color_p); 
    }); 

    $('#select_font').change(function() { 
     var change_font = $(this).val(); 
     $(".main_text").css("font-family", change_font); 
    }); 

    $("#change_font_size").change(function() { 
     var font_size = $(this).val(); 
     $('.main_text').css("font-size", font_size + "px"); 
    }); 
});

источник

2015-08-27 Viktor

Можете ли вы сделать работоспособную стека сниппет для него? –

Вы shold стиль вашего H-теги не родительский DIV.

Что-то вроде этого:

$('.main_text > *').css("font-size", font_size + "px");

источник

2015-08-27 09:05:00 eaCe

Вам необходимо обратиться к точной части HTML вы хотите работать с:

$(document).ready(function() { 

$('#selection').change(function() { 
    var tag = $(this).val(); 
    $(".main_text > h1").html("<" + tag + ">Change Headings</" + tag + ">"); 
}); 

$('#color_picker').change(function() { 
    var color_p = $(this).val(); 
    $('.main_text > h1').css("color", color_p); 
}); 

$('#select_font').change(function() { 
    var change_font = $(this).val(); 
    $(".main_text > h1").css("font-family", change_font); 
}); 

$("#change_font_size").change(function() { 
    var font_size = $(this).val(); 
    $('.main_text > h1').css("font-size", font_size + "px"); 
});

});

Работа JSFIDDLE

источник

2015-08-27 09:09:22

вы добавляете другие элементы h в свой тег h1, поэтому, если некоторые изменят h-теги, он не сможет изменить размер шрифта – eaCe

@eaCe right, я просто ссылался на h1, он может использовать *, а также .. –

Jquery Script не работает с Bootstrap

ответ

Смежные вопросы