ДИВ изменить стиль по щелчку не работает

Question

У меня есть некоторый DIV я хочу изменить избирательное положение дел до центра означает, предположит, что я выбираю первые две Див только что ДИВО текста перейти к center на мыши

$("#key").click(function myfunction() { 
 
    $("div").css("text-align", center); 
 
});

div { 
 
    background-color: yellow; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="key">clickme</button> 
 
<div onselect="myfunction()">blabla</div> 
 
<div onselect="myfunction()">cat</div> 
 
<div onselect="myfunction()">rose</div>

Answer 1

• Set (toggle) selected класс по click элемента
• Удалить inline событие onselect
• Set center свойство только те элементы, которые оказывают selected класс
• Установить свойство в quotes, $("div").css("text-align", 'center');

$("#key").click(function myfunction() { 
 
    $("div.toGrab:not(.selected)").css("text-align", ''); 
 
    $("div.selected").css("text-align", 'center'); 
 
}); 
 

 
$("div.toGrab").on("click", function() { 
 
    $(this).toggleClass('selected'); 
 
});

div { 
 
    background-color: yellow; 
 
    margin-top: 20px; 
 
    cursor: pointer; 
 
} 
 
.selected { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="key">clickme</button> 
 
<div class='toGrab'>blabla</div> 
 
<div class='toGrab'>cat</div> 
 
<div class='toGrab'>rose</div>

Answer 2

Вам не нужно давать имя нажмите function. Это может быть анонимно. Также должно быть $("div").css("text-align", 'center'), чтобы присвоить объект css.

function myfunction() { 
 
    //Not sure why you have this on div. 
 
} 
 

 
$(document).ready(function() { 
 
    $("#key").click(function() { 
 
    $("div").css("text-align", 'center') 
 
    }); 
 
});

div { 
 
    background-color: yellow; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="key">clickme</button> 
 
<div onselect="myfunction()">blabla</div> 
 
<div onselect="myfunction()">cat</div> 
 
<div onselect="myfunction()">rose</div>

Answer 3

Только незначительная барышня, нужно присвоить значение как строку, как показано ниже:

$("#key").click(function() { 
    $("div").css("text-align", "center"); 
}); 

Если вы хотите, чтобы дать запас, чем также номер будет указан в виде строки, как :

$("#key").click(function() { 
    $("div").css("padding", "50"); 
}); 

Answer 4

@aswathy y наш весь код в порядке, только вы пропустили "text-align", 'center'

center свойство должно быть в одинарных кавычках

$("#key").click(function myfunction() { 
 
    $("div").css("text-align", 'center'); 
 
    });

div { 
 
    background-color: yellow; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="key">clickme</button> 
 
<div onselect="myfunction()">blabla</div> 
 
<div onselect="myfunction()">cat</div> 
 
<div onselect="myfunction()">rose</div>