主页 / 问题 / 992014
Accepted
Максим Сиваконь
Asked:2020-06-12 19:33:22 +0000 UTC2020-06-12 19:33:22 +0000 UTC

如何通过数据中的数字找到图像的src路径

  • 772

我想画出图像查看的整个原理，我能做到这一点。

我有6张图片！

<img src="myImages_1.jpeg" class="old-block" data-item="1"/>
<img src="myImages_2.jpeg" class="old-block" data-item="2"/>
<img src="myImages_3.jpeg" class="old-block" data-item="3"/>
<img src="myImages_4.jpeg" class="old-block" data-item="4"/>
<img src="myImages_5.jpeg" class="old-block" data-item="5"/>
<img src="myImages_6.jpeg" class="old-block" data-item="6"/>

仍然<div>存在img- 这是预览查看图像所必需的

<div>
 <img src="" data-item="" class="elemberg"/>
</div>

此外，单击类时图像被复制old-block

$(".old-block").click(function () { //клик по классу old-block
        var src1 = $(this).attr('src'); //в переменную src1 получаю путь картинки
        $('.elemberg').attr('src', src1); //вставляю путь картинки в src c переменной src1 

        var src2 = $(this).attr('data-item');//копирую число с data-item
        $('.elemberg').attr('data-item', src2);//вставляю число в data-item 
});

我有<div>其中img- 这对于图像的完整视图是必要的

在这个块中，我滚动浏览图像，这是我无法实现的

<div>
 <img src="" data-item="" class="elemberg zoom"/>
</div>

<div id="blockMainText_blockControlPanelBig_leftMain">Left</div>
<div id="blockMainText_blockControlPanelBig_rightMain">Right</div>

接下来我试图让图像向右滚动

$('#blockMainText_blockControlPanelBig_leftMain').click(function(){
var data_item = $('.zoom').attr('data-item');//получаю число с data-item
 data_item++; // должно увеличивать моё полученное число на 1(-ну) еденицу
// тут продолжение кода
});

然后我被困在滚动图像上。

在这个想法中，我必须从中获取数字，data-item并为这个数字从属性中找到图像的路径src

例如：

我有

<img src="" data-item="" class="elemberg zoom"/>

当我单击按钮并知道数字data-item например 3时，我得到以下信息

<img src="myImages_3.jpeg" class="elemberg zoom" data-item="3"/>
jquery

2 个回答

  1. Best Answer

    必须在点击之外记住该数字。然后是通常的滑块...

    var data_item;
$('#blockMainText_blockControlPanelBig_rightMain').click(function(){     
 var blocks = $('.old-block').length; 
 data_item = ( $('.zoom').attr('data-item') == blocks ) ? 1 : (data_item + 1); // (*1)

 var src = $('.old-block').eq( data_item ).attr('src'); // src картинки по номеру, .eq(...)
 $('.zoom').attr('src', src);
});

    通过行 (*1)... 这是三元运算符与

    if( $('.zoom').attr('data-item') == blocks ) {
  data_item = 1; 
} else {
  data_item = (data_item + 1);
}

    如果数字等于图片的数量，那么它就没有地方增长了，它变成1。如果不是，它就增加1。同样的故事会跟着幻灯片向左滑动，只有当数字是1时，它会变成=图片的数量......如果不是，将减少1。

    但一般来说，如果您的图片没有巧妙地重新排列并且数据项在其中没有发挥关键作用，那么它们可以完全删除并使用类索引进行操作......

    • 2

  2. 该代码使用用户OPTIMUS PRIME。

    var countImages = $('.old-block').length; // узнаем количество элементов + глобальная переменная
var data_items = 0; // счётчик  + глобальная переменная

function rightButtonViewImages(){ // функция, так как обращаюсь к данной функции через кнопки клавиатуры, чтобы не дублировать код сделал функцию
    if( $('.zoom').attr('data-item') == countImages ) { // проверяем,если data-item равен количеству элементов countImages то
        data_items = 0; // наше число обнуляем
        $('.elemberg').attr('data-item', data_items); // устанавливаем число в data_item с переменной data_items 
    } else { // или
        data_items++; //увеличиваем переменную на 1 единицу
        $('.elemberg').attr('data-item', data_items);// устанавливаем число в data_item с переменной data_items 
    }
    var src = $('.old-block').eq(data_items).attr('src'); // тут присваиваем путь переменной src. Ищем data-item у которого есть значение и ищет его у элементов у которых есть класс .old-block и data-item равно нашему значению и берет наш путь картинки
    $('.elemberg').attr('src', src);//устанавливаем путь картинки
    $('.elemberg').attr('data-item', data_items);// устанавливаем число в data_item с переменной data_items 

}

    接下来，当您单击右侧的按钮时，我添加了滚动图像的功能！

    $('html').keydown(function(eventObject){
    if (event.keyCode == 39) { // 39 это номер клавиши в право
        if ($("#mainBlockForViewImages").hasClass("selected")) { // проверяю есть ли класс у моего элемента
            rightButtonViewImages(); // вызываю функцию, что бы изображение пролистывалось!
        }
    }
});

    所有的关键号码都列在这个网站上。

    27 - 按钮Esc

    37 - 左键（箭头）<

    39 - 右键（箭头）>

    107 - 按钮NumPad +

    109 - 按钮NumPad -

    • 0

相关问题