Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Правильно оформить скрипт (https://javascript.ru/forum/dom-window/60796-pravilno-oformit-skript.html)

ureech 20.01.2016 16:13
Правильно оформить скрипт
 
Здравствуйте.Подскажите пожалуйста как данный скрипт представить в более правильном виде. А то как то не красиво :yes: 
$(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>

рони 20.01.2016 16:21
ureech,
<button class="tab"  data-color="gray">Gray</button>

ureech 20.01.2016 16:58
ОК, написал так
$(function(){
 var dataColor = $('button').getAttribute('data-color')
$('.tab').on('click',function(){
$('.component').css('background',dataColor)
})

})

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

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

ureech 20.01.2016 17:04
И том спасибо.:yes:

Decode 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 20.01.2016 17:14
Decode,
Благодарю и вас,рони, тоже.Въехал.А как при повторном клике вернуть назад?

рони 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 20.01.2016 19:15
рони,Сразу видно,милейшей души человек!:yes: Большое, человеческое, спасибо.

рони 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>


Часовой пояс GMT +3, время: 15:35.