是否可以循环通过 switch 语句答案

【问题标题】：Is it possible to loop through a switch statement是否可以循环通过 switch 语句
【发布时间】：2022-01-24 23:00:23
【问题描述】：

我正在制作一个标准滑块，它有两个按钮来浏览图像。但是我想让它模块化。这样最终用户可以根据需要添加 200 张图像。我使用 Jquery 来隐藏和显示图像。但我不想写 200 if 语句，所以我使用了一个开关，并希望循环通过该开关来更改案例活动幻灯片以显示和隐藏其他元素，并在达到项目数量时停止。

但是我遇到了一些问题，有没有比我更有经验的人可以提供帮助

$('.slider-wrap').each( function() {
            let itemsAmount =  $('.slider-img', $(this)).length;
            console.log(itemsAmount);
        });


        let currentPic = 0;

        $('.sliderbuttonPlus').on('click', () => {
            currentPic++;

            let itemsAmount =  $('.slider-img', $('.slider-wrap')).length;
                        
            switch(currentPic) {

                case 0:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-0').css('display', 'block');
                break;

                case 1:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-1').css('display', 'block');
                break;

                case 2:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-2').css('display', 'block');
                break;

                case 3:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-3').css('display', 'block');
                break;

                case 4:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-4').css('display', 'block');
                break;

                case 5:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-5').css('display', 'block');
                break; 

                case 6:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-6').css('display', 'block');
                break;

                case 7:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-7').css('display', 'block');
                break;

                case 8:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-8').css('display', 'block');
                break;
                
                case 9:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-9').css('display', 'block');
                break;

            }   
                if(currentPic > itemsAmount) {
                        currentPic = itemsAmount;
                };

                console.log(currentPic);
        });
    

        $('.sliderbuttonMinus').on('click', () => {
            currentPic--;

        switch(currentPic) {
            case 0:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-0').css('display', 'block');
            break;
            case 1:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-1').css('display', 'block');
            break;
            case 2:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-2').css('display', 'block');
            break;
            case 3:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-3').css('display', 'block');
            break;
            case 4:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-4').css('display', 'block');
            break;
            case 5:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-5').css('display', 'block');
            break;   
            case 6:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-6').css('display', 'block');
            break;
            case 7:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-7').css('display', 'block');
            break;
            case 8:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-8').css('display', 'block');
            break;
            case 9:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-9').css('display', 'block');
            break;

        } 
        
        if (currentPic <= 0){
            currentPic = 0;
        };   
            console.log(currentPic);
        });

        if (currentPic === 0) {

            $('.slider-img').css('display', 'none');
            $('#slider-block-image-0').css('display', 'block');
            
        } 

        console.log(currentPic);     

    });

网站上显示的 HTML

<div class="slider-wrap">
    <div class="button-wrap">
        <button class="sliderbuttonMinus">Links</button>
    </div>


        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/warhammer-1.jpg" alt="" id="slider-block-image-0" style="display: block;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/xcom-1.jpg" alt="" id="slider-block-image-1" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skyrim-1.jpg" alt="" id="slider-block-image-2" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skylines-1.jpg" alt="" id="slider-block-image-3" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Sea-of-thieves-1.jpg" alt="" id="slider-block-image-4" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Mario-1.jpg" alt="" id="slider-block-image-5" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Minecraft-1.jpg" alt="" id="slider-block-image-6" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Overwatch-1.jpg" alt="" id="slider-block-image-7" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Half-life-1.jpg" alt="" id="slider-block-image-8" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/hearthstone-1.jpg" alt="" id="slider-block-image-9" style="display: none;">


         <div class="button-wrap">      
        <button class="sliderbuttonPlus">Rechts</button>
    </div>     
</div>

PHP

<div class="slider-wrap">
    <div class="button-wrap">
        <button class="sliderbuttonMinus">Links</button>
    </div>

<?php
// Check rows exists.
if( have_rows('afbeeldingen_slider') ):

    $x = 0;
    // Loop through rows.
    while( have_rows('afbeeldingen_slider') ) : the_row();

        // Load sub field value.
        $image = get_sub_field('slider_image');
        $image_url = $image['url'];
        $image_alt = $image['alt'];
        ?>

        <img class="slider-img" src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>" id="slider-block-image-<?php echo $x?>">


        <?php
        // Do something...
        $x++;
    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;


?> <div class="button-wrap">      
        <button class="sliderbuttonPlus">Rechts</button>
    </div>     
</div>

【问题讨论】：

我很想使用图像数组，然后使用与img ID 的数字部分相关的索引〜例如id="slider-block-image-0"
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript php jquery

【解决方案1】：

您只需要一个部分，带有图片的动态索引或指示符。

$('.slider-img').css('display', 'none');
$('#slider-block-image-' + currentPic).css('display', 'block');
//                      ^^^^^^^^^^^^^

【讨论】：

哇，谁知道解决方案会这么简单，我已经想了很久了。非常感谢！
您也可以使用 $('.slider-img') 创建一个 HTML 集合，并通过 $('.slider-img').eq(currentPic); 访问要切换到的图像；您可以使用 switch 语句以外的其他逻辑，并且代码会更加动态。

【解决方案2】：

作为 HTML 中硬编码的 img 元素和 javascript/jQuery 代码中重复声明的替代方案，您可以按照我的建议使用数组来为整个幻灯片提供动力。使用数组，您只需添加额外的img 源，然后它应该无需额外编码即可运行。这是用香草js仓促写的

// the index that points to current active picture
let cpic=0;

const d=document;
const parent = d.querySelector('div.slider-wrap');
const child = parent.firstElementChild;
const _CN='active';

const insertafter = (node, ref) => {
  ref.parentNode.insertBefore(node, ref.nextSibling)
};

// modify the global index variable `cpic`
// depending upon which button was clicked.
const clickhandler=function(e){
  switch( this.dataset.dir ){
    case 'minus':cpic--;break;
    case 'plus':cpic++;break;
  }
  if( cpic < 0 )cpic=images.length - 1;
  if( cpic > images.length - 1 )cpic=0;
  /*
    remove active class from all images
    and add to currently selected
  */
  parent.querySelectorAll('img').forEach((img,i)=>{
    img.classList.remove(_CN);
    if( i==cpic )img.classList.add(_CN);
  })
};



const path = 'https://zelfbouwcontainer.online/wp-content/';
/*
  This array powers the slide show. Add as many items
  to it as needed.
*/
const images = [
  '/uploads/2021/11/warhammer-1.jpg',
  '/uploads/2021/11/xcom-1.jpg',
  '/uploads/2021/11/Skyrim-1.jpg',
  '/uploads/2021/11/Skylines-1.jpg',
  '/uploads/2021/11/Sea-of-thieves-1.jpg',
  '/uploads/2021/11/Mario-1.jpg',
  '/uploads/2021/11/Minecraft-1.jpg',
  '/uploads/2021/11/Overwatch-1.jpg',
  '/uploads/2021/11/Half-life-1.jpg',
  '/uploads/2021/11/hearthstone-1.jpg'
];

/* dynamically add all images to the page, hidden based upn css class */
images.forEach((src, i) => {
  let img = new Image();
  img.src = path + src;
  img.className = 'slider-img';
  img.id = 'slider-block-image-' + i;
  img.dataset.id = i;

  insertafter(img, child)
});

/* set the first image visible */
parent.querySelector('img:first-of-type').classList.add(_CN);



d.querySelectorAll('button[data-dir]').forEach(bttn=>bttn.addEventListener('click',clickhandler));

.slider-wrap img{
  display:none;
}
.slider-wrap img.active{
  display:block;
}

<div class="slider-wrap">
  <div class="button-wrap">
    <button data-dir='minus' class="sliderbuttonMinus">Links</button>
  </div>
  <!-- dynamically add images here from array -->
  <div class="button-wrap">
    <button data-dir='plus' class="sliderbuttonPlus">Rechts</button>
  </div>
</div>

【讨论】：