Есть ли более простой способ написания этого кода?

-1

есть способ написать этот код более простым способом? Пример кода ниже использует jQuery, очевидно, только потому, что выглядит просто. Я уверен, что должен быть лучший способ, поскольку он повторяет содержимое функций. Я немного смущен тем, как передать идентификатор из триггеров в одну функцию.Есть ли более простой способ написания этого кода?

Конечно, я понимаю, что это может быть сделано с помощью javascript - любые указатели на кодирование, которые были бы также оценены.

Благодаря

Это HTML:

$(document).ready(function() { 
 
    $('.carImage').hide(); 
 
    $('#triggerA').click(function(e) { 
 
    $("#imageA").show(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerB').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").show(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerC').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").show(); 
 
    $("#imageD").hide(); 
 
    }); 
 
    $('#triggerD').click(function(e) { 
 
    $("#imageA").hide(); 
 
    $("#imageB").hide(); 
 
    $("#imageC").hide(); 
 
    $("#imageD").show(); 
 
    }); 
 
});

.item { 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    font-size: 3em; 
 
    padding: 1em; 
 
    margin: 0.5em; 
 
    background-color: #36F; 
 
    color: #FFF; 
 
    width: 75px; 
 
    float: left; 
 
} 
 
.item:hover { 
 
    background-color: #F0C; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#selectors { 
 
    overflow: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="selectors"> 
 
    <div class="item" id="triggerA"> 
 
    A 
 
    </div> 
 
    <div class="item" id="triggerB"> 
 
    B 
 
    </div> 
 
    <div class="item" id="triggerC"> 
 
    C 
 
    </div> 
 
    <div class="item" id="triggerD"> 
 
    D 
 
    </div> 
 
</div> 
 

 
<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" /> 
 
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

источник

2015-01-13 AliH

Эмм, вы уже делаете это с JavaScript? – adeneo

Вы можете делать все с помощью только css, просто зависит от конкретной функции, которую вы хотите. – Kenyanke

Вы можете выбрать сразу несколько элементов (например, $ ('# imageB, #imageC, #imageD'). Hide()) в ваших селекторах – tabz100

Вы можете использовать .index() и class эс, чтобы упростить код.

$(document).ready(function() { 
 
    $('.carImage').hide(); 
 
    $('.item').click(function() { 
 
    $('.carImage').hide().eq($(this).index()).show(); 
 
    }) 
 
});

.item { 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    font-size: 3em; 
 
    padding: 1em; 
 
    margin: 0.5em; 
 
    background-color: #36F; 
 
    color: #FFF; 
 
    width: 75px; 
 
    float: left; 
 
} 
 
.item:hover { 
 
    background-color: #F0C; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#selectors { 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selectors"> 
 
    <div class="item" id="triggerA"> 
 
    A 
 
    </div> 
 
    <div class="item" id="triggerB"> 
 
    B 
 
    </div> 
 
    <div class="item" id="triggerC"> 
 
    C 
 
    </div> 
 
    <div class="item" id="triggerD"> 
 
    D 
 
    </div> 
 
</div> 
 

 
<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" /> 
 
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" /> 
 
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

источник

2015-01-13 23:05:06

Блестящий, спасибо! – AliH

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Feature bar demo</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $('.carImage').hide(); 
 
    $('.item').click(function(e) { 
 
     $('.carImage').each(function(index, img) { 
 
      img.style.display = (img.id.slice(-1) == e.target.id.slice(-1) ? 'inline-block' : 'none') 
 
     }); 
 
    }); 
 
}); 
 
</script> 
 
<style> 
 
\t .item \t { 
 
\t \t font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 
\t \t font-size:3em; 
 
\t \t padding:1em; 
 
\t \t margin:0.5em; 
 
\t \t background-color:#36F; 
 
\t \t color:#FFF; 
 
\t \t width:75px; 
 
\t \t float:left; 
 
\t } 
 
\t .item:hover \t { 
 
\t \t background-color:#F0C; 
 
\t } 
 
\t a \t { 
 
\t \t text-decoration:none; 
 
\t \t color:#FFF; 
 
\t } 
 
\t #selectors \t { 
 
\t \t overflow:auto; 
 
\t } 
 
</style> 
 
</head> 
 

 
<body> 
 
\t <div id="selectors"> 
 
     <div class="item" id="triggerA"> 
 
     A 
 
     </div> 
 
     <div class="item" id="triggerB"> 
 
     B 
 
     </div> 
 
     <div class="item" id="triggerC"> 
 
     C 
 
     </div> 
 
     <div class="item" id="triggerD"> 
 
     D 
 
     </div> 
 
    </div> 
 
\t 
 
\t \t <img src="cars1.jpg" id="imageA" class="carImage"> 
 
     <img src="cars2.jpg" id="imageB" class="carImage"> 
 
     <img src="cars3.jpg" id="imageC" class="carImage"> 
 
     <img src="cars4.jpg" id="imageD" class="carImage"> 
 

 
</body> 
 
</html>

источник

2015-01-13 23:06:10 theliberalsurfer

Есть ли более простой способ написания этого кода?

ответ

Смежные вопросы