javascript - 找到某个item的最后一个类，并根据点击的item发布数据

标签 javascript php jquery html

我的主页上有三个 block 元素，每个元素代表一个服务。当我单击一个 block 时，div 会滑动打开，其中包含选项卡，这些选项卡代表所单击的服务 block 的子服务。

当单击一个 block 时，我希望它仅显示单击的服务 block 的子服务。

我的想法是在 block 上使用与数据库中的别名字段相同的类名(使用此字段我可以获取所有数据，它基本上是没有空格和引号的标题)。这样我就可以使用 ajax 将类名发布到我的查询中，并且只检索单击的 block 的数据，而不是一次检索所有内容。

但问题是，我有多个类，我如何告诉 jquery 获取哪一个？或者我可以搜索一下吗？我怎样才能正确地将其发布到我的 php 脚本中？

我将展示我得到的内容，也许它更容易理解:

(我的 block ，注意每个 div 的最后一个类:haven、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(目前仅适用于第一个 block ):

$('.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>

我使用查询中硬编码的别名测试了我的代码，它可以工作。所以我只需要知道如何从 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();
  }
}());

最佳答案

如果我正确理解了问题，这应该有效:

$('.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);
});

关于javascript - 找到某个item的最后一个类，并根据点击的item发布数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42905781/

上一篇：javascript - 物体上的声音效果 p5.js

下一篇：javascript - 如何在 jquery 对话框模型表单或引导弹出窗口中显示 CRUD View

相关文章：

php cURL 到 localhost 返回在开放端口上被拒绝的权限

php - 导入的产品在 OpenCart 管理面板中不可见？

javascript - jquery-bootgrid 如何使用加载事件？

javascript - 设置超时函数

javascript - 单选类型切换按钮问题

javascript - Firefox 点击事件错误

jquery - Bootbox 未使用 RequireJS 定义

javascript - 如何将自定义组件添加到 createMaterialTopTabNavigator 选项卡栏

javascript - 选择站点管理时，moodle 中 JSON 中位置 0 处出现意外标记 <

javascript - jQuery UI 可拖动不适用于 jQueryUI 1.12.1

©2024 IT工具网  联系我们