как я могу изменить цвет фона кнопки, используя jQuery? - PullRequest
Новая
       1

как я могу изменить цвет фона кнопки, используя jQuery?

0 голосов
/ 20 января 2020

Я хочу изменить фон элемента при нажатии кнопки для переключения буквы. Я пробовал attr и replace.

Я хочу, чтобы background-color кнопки с именем Step1 был белым, а Step2 - черным, когда я вижу nice to meet you. Как я могу это сделать?

Спасибо за чтение. 

$(document).ready(function() {
  $('#content2').hide();
  $('#content1').show();

  $('button').click(function(e) {
    $('#content1').hide();
    $('#content2').show();

    var colorA = $('#a').css('background-color'); //black
    var colorB = $('#b').css('background-color'); //white
    $('#a').attr('color', 'white');
    $('#b').attr('color', 'black');
  });
});
.star {
  border: 1px solid gray;
  margin: auto;
}

#a {
  border: 1px solid gray;
  background-color: black;
  color: white;
}

#b {
  border: 1px solid gray;
  background-color: white;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<div class="star">
  <il id="a">Step1</il>
  <il id="b">Step2</il>
  <div id="content1">
    <h1>hello</h1>
  </div>
  <div id="content2">
    <h1>nice to meet you</h1>
  </div>
  <button type="button">button</button>

Ответы [ 3 ]

1 голос
/ 20 января 2020

Здравствуйте и добро пожаловать в StackOverflow! API

jQuery позволяет изменять CSS с помощью метода .css(). У вас есть две возможности, согласно документации :

  1. .css('css_param', 'wanted_value')
  2. .css({'param1':'value1', 'param2':'value2', ...})

Взгляд на ваш #b element, это будет выглядеть так: 

$('#b').css('background-color','black');

Документы API jQuery просты для чтения и понимания. Если вы знаете метод, не стесняйтесь искать там. Это помогло мне много раз.

1 голос
/ 20 января 2020

Правильный путь: 

$('#a').css('background-color', 'black'); // With dash
//---------------------^

Или: 

$('#a').css('backgroundColor', 'black'); // Without dash

//--------------------^

И или: 

$('#a').css({ // object
   'backgroundColor': 'black',
   'color': 'white'
});

Или альтернативный способ addClass()

 $('#a').addClass('black');
// css
.black {
     background: black;
}


$(document).ready(function() {

  $('#content2').hide();
  $('#content1').show();

  $('button').click(function(e) {

    $('#content1').hide();
    $('#content2').show();

    $('#a').css({
      'backgroundColor': 'black',
      'color': 'white'
    });
    $('#b').css({
      'background-color': 'white',
      'color': 'black'
    });

  });

});
.star {
  border: 1px solid gray;
  margin: auto;
}

#a {
  border: 1px solid gray;
  background-color: white;
  color: black;
}

#b {
  border: 1px solid gray;
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="star">
  <il id="a">Step1</il>
  <il id="b">Step2</il>
  <div id="content1">
    <h1>hello</h1>
  </div>
  <div id="content2">
    <h1>nice to meet you</h1>
  </div>
  <button type="button">button</button>
</div>
0 голосов
/ 20 января 2020

Вы можете просто использовать css метод jQuery. Я обновил ваш код ниже. 

$(document).ready(function(){

    $('#content2').hide();
    $('#content1').show();

    $('button').click(function(e){

        $('#content1').hide();
        $('#content2').show();
        
       

        $('#a').css({"background-color":"white", "color":"black"});
        $('#b').css({"background-color":"black", "color":"white"});

    }); 

});
.star{
    border: 1px solid gray;
    margin: auto;
    }
#a {
    border: 1px solid gray;  
    background-color: black;
    color: white;
}
#b {
    border: 1px solid gray;   
    background-color: white;
    color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>

</head>
<body>
    <div class="star">
        <il id="a">Step1</il>
        <il id="b">Step2</il>
        <div id="content1">
            <h1>hello</h1>
        </div>
        <div id="content2">
            <h1>nice to meet you</h1>
        </div>
        <button type="button">button</button>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...