查找项目的最后一个类别，然后根据单击的项目发布数据
[英]Find the last class of an item and post data according to item clicked
问题描述
我的主页上有三个块元素，每个块元素代表一项服务。 当我单击一个块时，将打开一个带有选项卡的div幻灯片，这些选项卡代表单击的服务块的子服务。
单击某个块时，我希望它仅显示单击的serviceblock的子服务。
我的想法是在块上使用与数据库中别名字段相同的类名（使用该字段，我可以获取所有数据，基本上是标题，没有空格和引号）。 这样，我可以将带有ajax的类名发布到查询中，并且只检索单击的块的数据，而不是立即检索所有数据。
但是问题是，我有多个类，如何告诉jquery哪一个？ 还是可以搜索一个？ 以及如何将其正确发布到我的php脚本中？
我将展示我得到的东西，也许它使它更容易理解：
（我的街区，请注意每个div的最后一个班级：避风港，openbaar，landmeten）
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse haven">
<div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="01">
<span>Haven & Industrie</span>
</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse openbaar">
<div class="vk-iconbox vk-iconbox-background vk-iconbox-striped text-center" style="background-color: #faf5f5;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="02">
<span>Openbare Ruimte</span>
</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse landmeten">
<div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="03">
<span>Landmeten</span>
</h2>
</div>
</div>
</div>
我的JavaScript（目前仅适用于第一个区块）：
$('.haven').click(function(e){
$('.tabwrapper').slideToggle();
$('html, body').animate({
scrollTop: $(".tabwrapper").offset().top
}, 2000);
});
和我的PHP脚本，必须将与服务别名相同的名称（数据库中标题的其他名称）发布到该脚本。 我已经在查询中以dienstnaam名称添加了该行
<?
session_start();
class Connection {
// Configure Database Vars
private $host = 'removed';
private $username = 'removed';
private $password = 'removed';
private $db_name = 'removed';
public $db;
function __construct() {
// Create connection
$db = new mysqli($this->host, $this->username, $this->password, $this->db_name);
// Check connection
if ($db->connect_errno > 0) {
die('Unable to connect to the database: '.$db->connect_error);
}
$this->db = $db;
}
public function query($query) {
$db = $this->db;
$this->db->query('SET NAMES utf8');
if (!$result = $this->db->query($query)) {
die('There was an error running the query ['.$db->error.']');
} else {
return $result;
}
}
public function multi_query($query) {
$db = $this->db;
if (!$result = $this->db->multi_query($query)) {
die('There was an error running the multi query ['.$db->error.']');
} else {
return $result;
}
}
public function real_escape_string($value) {
return $this->db->real_escape_string($value);
}
public function inserted_id() {
return $this->db->insert_id;
}
}
$conn = new Connection;
?>
<div class="vk-what-we-do-section vk-section vk-section-style-2 vk-section-style-3 tabwrapper">
<div class="container">
<h2 class="vk-heading vk-heading-border vk-heading-border-left">
<?
// Haal de categorienaam op
$level1 = "SELECT * FROM `snm_categories` WHERE alias = '".$_POST['dienstnaam']."'";
$levelcon1 = $conn->query($level1);
$levelcr1 = array();
while ($levelcr1[] = $levelcon1->fetch_array());
// Haal alle artikelen op bij de bovenstaande categorie
$level2 = "SELECT * FROM `snm_content` WHERE catid = '".$conn->real_escape_string($levelcr1[0]['id'])."'";
$levelcon2 = $conn->query($level2);
$levelcr2 = array();
while ($levelcr2[] = $levelcon2->fetch_array());
?>
<span>
<span class="vk-text-color-yellow-1">Onze</span> expertise
</span>
</h2>
<nav class="box-filter text-center clearfix">
<ul class="vk-filter vk-filter-button-fix hidden-xs hidden-sm">
<?
foreach($levelcr2 as $topnamen){
if($topnamen['id'] != ''){
$namenoverzicht .= '<li class="data-filter" data-filter=".'.$topnamen['alias'].'">'.$topnamen['title'].'</li>';
}
}
echo $namenoverzicht;
?>
</ul>
<select class="vk-filter vk-filter-button-fix form-control hidden-md hidden-lg" id="dropdown-filter">
<?
foreach($levelcr2 as $options){
$optionlist .= '<option class="data-filter" value=".'.$options['alias'].'">'.$options['title'].'</option>';
}
echo $optionlist;
?>
</select>
</nav>
<div class="row vk-filter-fix">
<?
$o = 1;
foreach($levelcr2 as $tabdata){
if($o == 1){
$first = 'first';
}else{
$first = '';
}
$tabitem .= '
<div class="item '.$first.' '.$tabdata['alias'].'">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">'.$tabdata['title'].'</h4>
'.$tabdata['introtext'].'
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="'.$tabdata['alias'].'.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>';
$o++;
}
echo $tabitem;
?>
</div>
</div>
</div>
我用查询中的硬编码别名测试了我的代码btw，并且可以正常工作。 所以我只需要知道如何从div中检索类名，然后通过ajax将其发送到我的php脚本，然后在名为tabwrapper的div内的索引页上显示我的php脚本的结果。
我的php脚本的来源（使用硬编码的别名，否则将没有任何东西）：
<div class="vk-what-we-do-section vk-section vk-section-style-2 vk-section-style-3 tabwrapper">
<div class="container">
<h2 class="vk-heading vk-heading-border vk-heading-border-left">
<span>
<span class="vk-text-color-yellow-1">Onze</span> expertise
</span>
</h2>
<nav class="box-filter text-center clearfix">
<ul class="vk-filter vk-filter-button-fix hidden-xs hidden-sm">
<li class="data-filter" data-filter=".landmeetkunde">Landmeetkunde</li><li class="data-filter" data-filter=".uitzetten">Uitzetten</li><li class="data-filter" data-filter=".monitoring">Monitoring</li><li class="data-filter" data-filter=".gis">GIS</li><li class="data-filter" data-filter=".as-built-verwerking">As-built verwerking</li><li class="data-filter" data-filter=".inspectie-metingen">Inspectie-metingen</li> </ul>
<select class="vk-filter vk-filter-button-fix form-control hidden-md hidden-lg" id="dropdown-filter">
<option class="data-filter" value=".landmeetkunde">Landmeetkunde</option><option class="data-filter" value=".uitzetten">Uitzetten</option><option class="data-filter" value=".monitoring">Monitoring</option><option class="data-filter" value=".gis">GIS</option><option class="data-filter" value=".as-built-verwerking">As-built verwerking</option><option class="data-filter" value=".inspectie-metingen">Inspectie-metingen</option><option class="data-filter" value="."></option> </select>
</nav>
<div class="row vk-filter-fix">
<div class="item first landmeetkunde">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">Landmeetkunde</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="landmeetkunde.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="item uitzetten">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">Uitzetten</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="uitzetten.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="item monitoring">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">Monitoring</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="monitoring.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="item gis">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">GIS</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="gis.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="item as-built-verwerking">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">As-built verwerking</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="as-built-verwerking.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="item inspectie-metingen">
<div class="col-md-6 left">
<div class="vk-img-frame">
<img src="images/services/image-7.jpg" alt=""/>
</div>
</div>
<div class="col-md-6 right">
<div class="content">
<h4 class="text-uppercase vk-title">Inspectie-metingen</h4>
</div>
<div class="vk-buttons">
<div class="vk-counter vk-counter-non-icon">
</div>
<a href="inspectie-metingen.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div> </div>
</div>
</div>
我以前的ajax脚本在评论中要求：
(function(){
/*
Meer websites laden
*/
if(document.getElementById('loadnews') !== null) {
var limit = 9;
var offset = 0;
var i =0;
$('#loadmore').click(function() {
limit = 3;
if(i == 0) {
offset += 9;
} else {
offset += 3;
}
i++;
ajax();
});
var posts = document.getElementById('loadnews');
function ajax() {
$.ajax({
url: 'includes/loadmore.php',
type: "POST",
data: {limit: limit, offset: offset},
success: function(data){
var newWrapper = document.createElement('div')
//add class to newWrapper or whatever
newWrapper.innerHTML=data;
loadnews.appendChild(newWrapper);
setTimeout(function() {
$("#portfolio-gallery").lightGallery({
galleryId: 2,
selector: '.post-image'
});
}, 300);
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
}
ajax();
}
}());
1 个解决方案
解决方案1
1 2017-03-20 14:17:11
如果我正确理解了该问题，则该方法应该起作用：
$('.handmouse').click(function(e){
$(this).children('.tabwrapper').slideToggle();
$('html, body').animate({
scrollTop: $(this).children(".tabwrapper").offset().top
}, 2000);
});
编辑 ：在情况下，如果tabwrapper不是嫡系handmouse ，那么下面应该工作：
$('.handmouse').click(function(e){
$(this).find('.tabwrapper').slideToggle();
$('html, body').animate({
scrollTop: $(this).find(".tabwrapper").offset().top
}, 2000);
});
编辑：由于问题比应该的复杂得多，因此上述代码无关紧要。 我最后一次了解确切需要什么的镜头是：
$('.handmouse').click(function(e){
var classList = $(this).className.split(/\s+/);
var alias = classList[classList.length]; // This is the... "alias"?... of the element that was clicked.
// Fetch data using the alias into a 'data' variable
$('.tabwrapper').slideToggle();
$('.tabwrapper').text(data); // Put the hypothetical data into the tabwrapper.
$('html, body').animate({
scrollTop: $(".tabwrapper").offset().top
}, 2000);
});
使用Jquery查找被单击项的类
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.