Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2016, 16:13
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Правильно оформить скрипт
Здравствуйте.Подскажите пожалуйста как данный скрипт представить в более правильном виде. А то как то не красиво
$(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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ureech,
<button class="tab"  data-color="gray">Gray</button>
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2016, 16:58
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

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

})

Почему не работает?
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2016, 17:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ureech,
потому что 2 строка неправильная и стоит не на своём месте
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2016, 17:04
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

И том спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2016, 17:08
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

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>
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2016, 17:14
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Decode,
Благодарю и вас,рони, тоже.Въехал.А как при повторном клике вернуть назад?
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2016, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #9 (permalink)  
Старый 20.01.2016, 19:15
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

рони,Сразу видно,милейшей души человек! Большое, человеческое, спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 20.01.2016, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно оформить массив в js файле? alexander70 Общие вопросы Javascript 4 15.06.2013 12:19
Как правильно написать скрипт Estrella Moretti (X)HTML/CSS 3 17.08.2011 15:45
Не работает скрипт :( VladimirV Javascript под браузер 5 21.12.2010 14:26
Как украсть скрипт? bayah Общие вопросы Javascript 6 26.04.2010 10:32
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19