Question

我正在尝试做一些事情，我单击div的标题，然后弹出带有该div信息的模式。 div附加在jquery中。因此，现在我想要当我单击链接时，使用类ForumItem为我提供父Div的ID，然后在该论坛项目之后向我返回div的某些信息。我尝试了最接近的方法，但这总是返回undefined

附加的div

const Sequelize = require('sequelize');
const sequelize = new Sequelize('db', 'user', 'password', {
  host: '0.0.0.0',
  port: '8306',
  dialect: 'mysql',
  operatorsAliases: false,
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  },
  define: {
    timestamps: false
  }
});

sequelize
  .authenticate()
  .then(() => {
    console.log('Connection has been established successfully.');
  })
  .catch(err => {
    console.error('Unable to connect to the database:', err);
  });

const Channel = sequelize.define('brands', {
    brandid: {
        type: Sequelize.INTEGER,
        primaryKey: true
    },
    name: {
      type: Sequelize.STRING
    }
});

const Brief = sequelize.define('briefs', {
  briefid: {
      type: Sequelize.INTEGER,
      primaryKey: true
  },
  name: {
    type: Sequelize.STRING
  },
  brand: {
    type: Sequelize.INTEGER,
    references: {
      model: Channel,
      key: 'brandid'
    }
  }
});

Channel.findAll({
  include: [{
    model: Brief
  }]
  //[{ all: true, nested: true }]
})
.then(channels => {
  channels.forEach(function(channel) {
    console.log(channel.name);
    });
})

我尝试像这样获取父div的ID，但这将返回未定义

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal()"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

Answer 1

您需要将当前单击的元素作为参数传递：

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal(this)"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

然后，使用传递的参数作为绑定对象：

function loadModal(clicked){
    var divid = $(clicked).closest(".forumItem").attr("id");
    console.log(divid);
}

在函数内的代码$(this)中，指向函数对象本身而不是单击的元素。

最好的方法是添加一个事件委托，侦听每个单击的按钮，而不用JavaScript事件污染dom。首先从创建的元素中删除onclick：

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

然后创建事件委托侦听器，并挂接到主容器（.mainForm）：

$('.mainForum').on('click', '.titleButton', function() {
    var divid = $(this).closest(".forumItem").attr("id");
    console.log(divid);
});

$(".mainForum").append('<div class="forumItem" id="test"><button class="titleButton"> click me</button></div>');

$('.mainForum').on('click', '.titleButton', function() {
  var divid = $(this).closest(".forumItem").attr("id");
  console.log(divid);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainForum">

</div>

希望有帮助。

查找父div ID，然后找到该div子级的所有数据

1 个答案: