รับแอตทริบิวต์ขององค์ประกอบที่ถูกคลิกโดยใช้ Javascript หรือไม่ [ทำซ้ำ]

ฉันต้องการรับแอตทริบิวต์ "name" ของ div ที่ถูกคลิกและใช้สำหรับฟังก์ชันอื่นโดยใช้ vanilla Javascript ฉันลองวิธีแก้ปัญหาหลายอย่างที่พบใน Stack Overflow แต่ไม่มีอะไรทำงาน ใครสามารถช่วยได้บ้าง?

นี่คือสิ่งที่ฉันได้ลอง (เวอร์ชันที่เหมาะกับฉัน):

let navLinks = document.querySelectorAll(".navbar .item");
navLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    let attr = e.target.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
  <div class="container">
    <div name="home" class="item active">
      <div><img src="img/icons/home1.png"></div>
      <div>Home</div>
    </div>
    <div name="faq" class="item">
      <div><img src="img/icons/faq2.png"></div>
      <div>FAQ</div>
    </div>
    <div name="calc" class="item cta_calc">
      <div><img src="img/icons/dash1.png"></div>
    </div>
    <div name="about" class="item">
      <div><img src="img/icons/info3.png"></div>
      <div>About</div>
    </div>
    <div name="contact" class="item">
      <div><img src="img/icons/info2.png"></div>
      <div>Contact</div>
    </div>
  </div>
</nav>


javascript html ecmascript-6 dom-events
person Mohamed Arkib    schedule 20.02.2020    source แหล่งที่มา
comment
stackoverflow.com/questions/10086427/   -  person James    schedule 20.02.2020
comment
e.target คือสิ่งที่ถูกคลิก ซึ่งน่าจะเป็นแท็ก img คุณต้องการ e.currentTarget ซึ่งเป็นองค์ประกอบที่ผู้ฟังผูกไว้   -  person James    schedule 20.02.2020
comment
ขอบคุณ มันทำงานได้อย่างสมบูรณ์แบบ   -  person Mohamed Arkib    schedule 21.02.2020

คำตอบ (1)


arrow_upward
0
arrow_downward

แทนที่จะใช้ targetuse Event.currentTarget< /ก>:

คุณสมบัติ currentTarget แบบอ่านอย่างเดียวของอินเทอร์เฟซเหตุการณ์จะระบุเป้าหมายปัจจุบันสำหรับเหตุการณ์ เนื่องจากเหตุการณ์เดินทางผ่าน DOM โดยจะอ้างอิงถึงองค์ประกอบที่แนบตัวจัดการเหตุการณ์ไว้เสมอ ซึ่งตรงข้ามกับ Event.target ซึ่งระบุองค์ประกอบที่เกิดเหตุการณ์ขึ้นและอาจเป็นองค์ประกอบที่สืบทอด

let attr = e.currentTarget.getAttribute('name');


let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = e.currentTarget.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>

หรือ: คุณสามารถใช้ _7 คำหลัก:

let attr = this.getAttribute('name');


let navLinks = document.querySelectorAll(".navbar .item");        
navLinks.forEach(function(link){
  link.addEventListener("click",function(e){
    let attr = this.getAttribute('name');
    console.log(attr); //logs null

    //openPage(".home");
  });
});
<nav class="navbar">
    <div class="container">
        <div name="home" class="item active">
            <div><img src="img/icons/home1.png"></div>
            <div>Home</div>
        </div>
        <div name="faq" class="item">
            <div><img src="img/icons/faq2.png"></div>
            <div>FAQ</div>
        </div> 
        <div name="calc" class="item cta_calc">
            <div><img src="img/icons/dash1.png"></div>
        </div> 
        <div name="about" class="item">
            <div><img src="img/icons/info3.png"></div>
            <div>About</div>
        </div> 
        <div name="contact" class="item">
            <div><img src="img/icons/info2.png"></div>
            <div>Contact</div>
        </div>
    </div>       
</nav>

person Mamun    schedule 20.02.2020
comment
คุณยังสามารถใช้ this - person Barmar; 20.02.2020
comment
ขอบคุณมาก!! นี่ก็ได้ผลเช่นกัน ... - person Mohamed Arkib; 21.02.2020
comment
@MohamedArkib ยินดีเป็นอย่างยิ่ง :) - person Mamun; 21.02.2020