Использование javascript для установки атрибута data-image - PullRequest
Новая
       25

Использование javascript для установки атрибута data-image

0 голосов
/ 15 апреля 2020

я работал над слайдером изображений1, который заполняет содержимое из базы данных 

<div class="col-md-6" style="padding-right:0 !important;padding-left: 0 !important;">
                        <div id="messages_product_view"></div>
                        <div class="product-img-box col-md-12" style="padding-right:0 !important;padding-left: 0 !important;">
                            <div class="product-image">
                                <div class="product-full"> <img style="width:100% !important; height:100% !important" id="product-zoom1" src="/Content/images/2.jpg" data-zoom-image="/Content/images/2.jpg" alt="product-image" /> </div>
                                <div class="more-views">
                                    <div class="slider-items-products">
                                        <div id="gallery_02" class="product-flexslider hidden-buttons product-img-thumb">
                                            <div class="slider-items slider-width-col3 block-content">
                                                <div class="more-views-items"> <a id="zz1" data-image="" data-zoom-image=""> <img style="width:65px !important; height:60px !important" id="product-zoom0" src="/Content/images/2.jpg" alt="product-image" /> </a></div>
                                                <div class="more-views-items"> <a id="zz2"data-image="/Content/images/3.jpg" data-zoom-image="/Content/images/3.jpg"> <img style="width:65px !important; height:60px !important" id="product-zoom2" src="/Content/images/3.jpg" alt="product-image" /> </a></div>
                                                <div class="more-views-items"> <a  id="zz3" data-image="/Content/images/4.jpg" data-zoom-image="/Content/images/4.jpg"> <img style="width:65px !important; height:60px !important" id="product-zoom3" src="/Content/images/4.jpg" alt="product-image" /> </a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

я могу установить атрибут изображения * sr c этих элементов слайдера, но я не могу понять, как можно я устанавливаю атрибуты data-image и data-zoom-image, есть ли способ? Я пытался использовать этот способ, но он не работает 

 <script>
   var h1 = document.getElementsByTagName("zz1"); //zz1 here is the id of first slider item who's attributes im trying to set
var att = document.createAttribute("data-image");     
        att.value = "/Content/images/4.jpg";
        var att1 = document.createAttribute("data-zoom-image");    
        att1.value = "/Content/images/4.jpg";  

        h1.setAttributeNode(att);  
        h1.setAttributeNode(att1);  


    </script>

1 Ответ

0 голосов
/ 15 апреля 2020

Вы используете неправильный метод для выбора по идентификатору, используйте getElementById вместо getElementsByTagName 

        var h1 = document.getElementById("zz1");
        var att = document.createAttribute("data-image");     
        att.value = "/Content/images/4.jpg";
        var att1 = document.createAttribute("data-zoom-image");    
        att1.value = "/Content/images/4.jpg";
        h1.setAttributeNode(att);
        h1.setAttributeNode(att1); 
        console.log(h1)
<div id="zz1"></div>
...