如何從元素中獲取 jQuery 中數據屬性的值？

Question

我是 jQuery 的新手，我需要幫助...

我有這個 html：

<div class="portfolio__items">
          <div class="portfolio__item">
            <img src="./img/web-1.jpg" id="img1" alt="Imagen Web de Ejemplo 1" />
            <div class="portfolio__btns">
              <a href="#!" class="portfolio__btn prev" data-id="img1"><i class="fas fa-eye"></i>  Preview</a>
              <a href="#!" class="portfolio__btn"><i class="fab fa-github"></i>  Github</a>
            </div>
          </div>
          <div class="portfolio__item">
            <img src="./img/web-2.jpg" id="img2" alt="Imagen Web de Ejemplo 2" />
            <div class="portfolio__btns">
              <a href="#!" class="portfolio__btn prev" data-id="img2"><i class="fas fa-eye"></i>  Preview</a>
              <a href="#!" class="portfolio__btn"><i class="fab fa-github"></i>  Github</a>
            </div>
          </div>

……等等……等等……

而這個 jQuery：

function cambiaImagenes(items) {
    var self = this;
    log("Valor self:")
    log(self)
    var portfolio = $(items);
    log("Valor portfolio:")
    log(portfolio)
    var botones = portfolio.find("div.portfolio__item");
    log("Valor botones:")
    log(botones)
       
    function swap_modal(a) {
      el = this;
      log(el) 
      value = el.data("id");
      log(value)
    }
    botones.on("click", "a.prev", swap_modal);
  }
  new cambiaImagenes("div.portfolio__items");

我在控制台中得到了這個結果：

Valor self:
cambiaImagenes {}

Valor portfolio:
S.fn.init [div.portfolio__items, prevObject: S.fn.init(1)]

Valor botones:
S.fn.init(6) [div.portfolio__item, div.portfolio__item, div.portfolio__item, div.portfolio__item, div.portfolio__item, div.portfolio__item, prevObject: S.fn.init(1)]


<a href=​"#!" class=​"portfolio__btn prev" data-id=​"img1">​…​</a>​
Uncaught TypeError: el.data is not a function
    at HTMLAnchorElement.swap_modal (main.js:216)
    at HTMLDivElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLDivElement.v.handle (jquery-3.6.0.min.js:2)
    at HTMLDivElement.patchedCallback (<anonymous>:132:45)


<a href=​"#!" class=​"portfolio__btn prev" data-id=​"img2">​…​</a>​
Uncaught TypeError: el.data is not a function
    at HTMLAnchorElement.swap_modal (main.js:216)
    at HTMLDivElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLDivElement.v.handle (jquery-3.6.0.min.js:2)
    at HTMLDivElement.patchedCallback (<anonymous>:132:45)      

如您所見，每次我單擊具有 data-id 屬性的鏈接時，它都會為我提供正確的事件鏈接，但我無法獲取 data("id") 的值。

我做錯了什么？？

非常感謝！！！

Answer 1

這可能是您正在尋找的
let yourval = $(el).attr('data-id');

Answer 2

也許這個例子可以幫助你

 //get all data from form let data_form_attr = {}; $.each($('#form').find(':input'), function (index, ref) { const element = $(ref); console.log("value of "+ element.attr('data-attr')+": "+element.val()); }); //get from attr from any tag let value= $('#h1_id').attr('data-attr'); console.log (value);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <:-- form --> <form id="form"> <label for="fname">First name:</label><br> <input type="text" data-attr='fname' id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" data-attr='lname' id="lname" name="lname" value="Doe"><br><br> </form> <!-- any tag --> <h1 data-attr='data attribute' id="h1_id" class="form-control">