Выключатель для выбора кнопок в jQuery или Javascript

Кто-нибудь знает, как уменьшить мой код ниже или сделать его проще? Код предназначен для выбора трех кнопок из тридцати кнопок. Так что я могу видеть некоторую информацию по выбранным трем кнопкам, которые мне интересны. На самом деле код включает в себя 8 кнопок выбора до сих пор, но мне нужно сделать 30 кнопок.Выключатель для выбора кнопок в jQuery или Javascript

---------------------- мой код ---------------------- -------

<script> 

$(document).ready(function(){ 
$("#button2").click(function(){ 
    $("#myNav1").fadeIn(1000); 
    }); 
    $(".closebtn").click(function(){ 
     $("#myNav1").animate({width: '0px'}); 
    }); 
    var counter = 0; 
    $("button").bind("click",function(){ 
var btnid = this.id; 
if (counter < 4) { 
switch (btnid){ case "btn1": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/1.jpg");counter ++; break; 
    case 1 : $("#img2").attr("src","icon/1.jpg");counter ++; break; 
    case 2 : $("#img3").attr("src","icon/1.jpg");counter ++; break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn2": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/2.jpg");counter ++; break; 
    case 1 : $("#img2").attr("src","icon/2.jpg");counter ++; break; 
    case 2 : $("#img3").attr("src","icon/2.jpg");counter ++; break; 
    case 3 : alert("Please Select result button"); counter = 0 ; break; 
    } break; 
    case "btn3": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/3.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/3.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/3.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ;break; 
    } break; 
    case "btn4": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/4.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/4.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/4.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn4": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/4.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/4.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/4.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn5": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/5.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/5.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/5.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn6": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/6.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/6.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/6.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn7": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/7.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/7.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/7.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn8": switch (counter){ 
    case 0 : $("#img1").attr("src","icon/8.jpg");counter ++;break; 
    case 1 : $("#img2").attr("src","icon/8.jpg");counter ++;break; 
    case 2 : $("#img3").attr("src","icon/8.jpg");counter ++;break; 
    case 3 : alert("Please Select result button");counter = 0 ; break; 
    } break; 
    case "btn9": switch (counter) { 
    case 0: break; 
    case 1: $("#img1").attr("src","");counter --; break; 
    case 2: $("#img2").attr("src","");counter --; break; 
    case 3: $("#img3").attr("src","");counter --; break; 
    } break; 
     } 
    } 
else{ 
alert("Please Select result button"); 
counter = 0 ; 
    } 
    }); 
}); 
</script> 
</head> 
<body> 

<button id="button2">HTML Start Button</button> 
<button id="button3">HTML Reset Button</button> 
<div class="btnCl"> 
<button id="btn1">11</button> 
<button id="btn2">22</button> 
<button id="btn3">33</button> 
<button id="btn4">44</button> 
<button id="btn5">55</button> 
<button id="btn6">66</button> 
<button id="btn7">77</button> 
<button id="btn8">88</button> 
<button id="btn9">return</button> 
</div> 

<div id="myNav1" class="overlay"> 
<a href="javascript:void(0)" class="closebtn" >&times;</a> 
<div class="overlay-content"> 
<h1>Selected Contents</h1> 
      <div class="imgCl"> 
    <img id="img1" src="" alt=""></img> 
     <img id="img2" src="" alt=""></img> 
     <img id="img3" src="" alt=""></img> 
     </div> 
     </br> 
    </div> 
</div>

источник

2016-06-02 Eric Yun

Ее лучше иметь что-то родовое, как это создать переменные для ограничений. . например buttonEnd = 9;. Затем используйте их в коде. Вы можете изменить это на основе количества кнопок.

var counter = 0; 
 
var buttonEnd = 9; 
 
$(document).ready(function() { 
 
    $("#button2").click(function() { 
 
    $("#myNav1").fadeIn(1000); 
 
    }); 
 
    $(".closebtn").click(function() { 
 
    $("#myNav1").animate({ 
 
     width: '0px' 
 
    }); 
 
    }); 
 
    $("button").bind("click", function() { 
 
    var btnid = Number(this.id.replace('btn', '')); 
 
    if (counter < 4) { 
 
     if (btnid < buttonEnd) { 
 
     if (counter == 3) { 
 
      alert("Please Select result button"); 
 
      counter = 0; 
 
     } else { 
 
      $("#img" + (counter + 1)).attr("src", "icon/" + btnid + ".jpg"); 
 
      counter++; 
 
     } 
 

 
     } else { 
 
     $("#img" + (counter)).attr("src", ""); 
 
     counter--; 
 
     } 
 
    } else { 
 
     alert("Please Select result button"); 
 
     counter = 0; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="button2">HTML Start Button</button> 
 
<button id="button3">HTML Reset Button</button> 
 
<div class="btnCl"> 
 
    <button id="btn1">11</button> 
 
    <button id="btn2">22</button> 
 
    <button id="btn3">33</button> 
 
    <button id="btn4">44</button> 
 
    <button id="btn5">55</button> 
 
    <button id="btn6">66</button> 
 
    <button id="btn7">77</button> 
 
    <button id="btn8">88</button> 
 
    <button id="btn9">return</button> 
 
</div> 
 

 
<div id="myNav1" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn">&times;</a> 
 
    <div class="overlay-content"> 
 
    <h1>Selected Contents</h1> 
 
    <div class="imgCl"> 
 
     <img id="img1" src="" alt=""></img> 
 
     <img id="img2" src="" alt=""></img> 
 
     <img id="img3" src="" alt=""></img> 
 
    </div> 
 
    </br> 
 
    </div> 
 
</div>

источник

2016-06-02 09:17:00 RRK

WoW. Он работает очень хорошо. Огромное спасибо :) –

var counter = 0; 
$("button").bind("click",function() { 
    var btnid = $(this).id; 
    var img; 
    if (counter++ < 3) {  
     var img = "icon/" + btnid + ".jpg"; 
     $("#img" + counter).attr("src",img); 
    } 
    else alert("Please Select result button"); 
}

Вы просто должны изменить БТН-идентификаторы для простых чисел (без «BTN»), а затем использовать его в качестве переменных für имя изображения. (Или изменить имена изображений на «btn1.jpg, ...)

источник

2016-06-02 08:52:05

Благодарим вас за ваш ответ. Вы знаете, как уменьшить часть "case" btn1 ": switch (counter)" ~ "case" btn8 ": switch (counter)" хотя? Фактически я хотел выбрать три кнопки из тридцати кнопок, а затем поместить новое изображение с помощью выбранной кнопки в трехместных держателях, упомянутых в этом коде, # img1, # img2, # img3. –

Итак, чтобы вы поняли: изображения должны появляться при нажатии всех трех кнопок? или один за другим? –

Я хотел бы удалить все переключатель так:

if(counter < 3) { 
    $("#img" + (counter + 1)).attr("src","icon/" + btnid + ".jpg"); 
    counter ++; 
} 
else { 
    alert("Please Select result button"); 
    counter = 0; 
}

источник

2016-06-02 09:01:34

Выключатель для выбора кнопок в jQuery или Javascript

ответ

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