Форум

ureech · #1 (**permalink**) 20.01.2016, 16:13

Здравствуйте.Подскажите пожалуйста как данный скрипт представить в более правильном виде. А то как то не красиво

$(function(){
$('.tab').on('click',function(){
$('.component').css('background','gray')
})
$('.tab2').on('click',function(){
$('.component').css('background','red')
})
$('.tab3').on('click',function(){
$('.component').css('background','blue')
})
})

<button class="tab">Gray</button>
<button class="tab2">Red</button>
<button class="tab3">Blue</button>

рони · #2 (**permalink**) 20.01.2016, 16:21

ureech,

<button class="tab"  data-color="gray">Gray</button>

ureech · #3 (**permalink**) 20.01.2016, 16:58

ОК, написал так

$(function(){
 var dataColor = $('button').getAttribute('data-color')
$('.tab').on('click',function(){
$('.component').css('background',dataColor)
})

})

Почему не работает?

рони · #4 (**permalink**) 20.01.2016, 17:01

ureech,
потому что 2 строка неправильная и стоит не на своём месте

ureech · #5 (**permalink**) 20.01.2016, 17:04

И том спасибо.

Decode · #6 (**permalink**) 20.01.2016, 17:08

ureech, надо еще делегирование использовать.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div class="tabs-wrap">
      <button class="tab" data-color="gray">Gray</button>
      <button class="tab" data-color="red">Red</button>
      <button class="tab" data-color="blue">Blue</button>
    </div>

    <div class="component" style="width:100%; height: 100px; margin-top: 10px;"></div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    
    <script>
      $(function(){
        $('.tabs-wrap').on('click', '.tab', function() {
          $('.component').css( 'background', $(this).data('color') );
        })
      });
    </script>
  </body>
</html>

ureech · #7 (**permalink**) 20.01.2016, 17:14

Decode,
Благодарю и вас,рони, тоже.Въехал.А как при повторном клике вернуть назад?

рони · #8 (**permalink**) 20.01.2016, 17:36

ureech,

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .component {
      background-color: Chocolate;width:100%; height: 100px; margin-top: 10px;
    }

    </style>
  </head>
  <body>
    <div class="tabs-wrap">
      <button class="tab" data-color="gray">Gray</button>
      <button class="tab" data-color="red">Red</button>
      <button class="tab" data-color="blue">Blue</button>
    </div>

    <div class="component" ></div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
$(function() {
    var a = $(".component").css("backgroundColor");
    $(".tabs-wrap").on("click", ".tab", function() {
        var b = $(".component").css("backgroundColor"),
            c = $(this).data("color");
        $(".component").css({
            backgroundColor: c
        });
        $(".component").css("backgroundColor") == b && $(".component").css({
            backgroundColor: a
        })
    })
});
    </script>
  </body>
</html>

ureech · #9 (**permalink**) 20.01.2016, 19:15

рони,Сразу видно,милейшей души человек!

Большое, человеческое, спасибо.

рони · #10 (**permalink**) 20.01.2016, 19:53

чуть покороче

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .component {
      background-color: Chocolate;width:100%; height: 100px; margin-top: 10px;
    }

    </style>
  </head>
  <body>
    <div class="tabs-wrap">
      <button class="tab" data-color="gray">Gray</button>
      <button class="tab" data-color="red">Red</button>
      <button class="tab" data-color="blue">Blue</button>
    </div>

    <div class="component" ></div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
$(function() {
var el = $(".component");
function fn(b) {
    b && el.css("backgroundColor", b);
    return el.css("backgroundColor")
}
var a = fn();
$(".tabs-wrap").on("click", ".tab", function() {
    var b = fn(),
        c = $(this).data("color");
    fn(c);
    fn() == b && fn(a)
});
});
    </script>
  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript