弹出仅在单击第一个div时有效

时间：2015-06-22 20:11:33

标签： javascript php jquery html

我制作了一个汽车交易页面，您可以发布汽车，在发布汽车后，页面从数据库加载。现在我想，当点击一辆汽车弹出窗口时，更多信息可以完美运行但是如果上传了第二辆汽车，则无法点击第二辆汽车，当你点击第一辆汽车时，每次加载另一辆汽车。那我怎么能让弹出窗口工作呢？

这是我的代码：

    <a id="my-button">
    <?php
        try {

            $stmt = $db->query('SELECT * FROM voertuigen WHERE categorie = "pauto" ORDER BY ID DESC');
            while($row = $stmt->fetch()){
                echo '<tr><div style="position:relative; left:50%; margin-top:50px; color:white; margin-left:-120px;             height:200px; width:525px; background-color:white; border: 3px solid #b90007;">';
                echo '<img src="http://searchonit.nl/VosAutoTrading/admin/images/'.$row['f1'].'" style="width:300px; height:200px;"/>';
                echo '<div style="position:absolute; margin-top:-200px; color:black; margin-left:325px;"><h2>'.$row['merk'].'</h2><p>';
                echo '<b>'.$row['kostenrijklaar'].'</b><p>';
                echo '<b>'.$row['brandstof'].'</b><p>';
                echo '<b>'.$row['bouwjaar'].'</b><p></div></div>';
                echo '<div style="z-index:5; margin-top:-37.5px; left:50%; margin-left:300px; position:absolute; color:white; font-size:30;">&euro; '.$row['prijs'].',-</div>';
                echo '</td><img src="images/pricetag.png" style="position:absolute; left:50%; margin-Left:270px; margin-top:-40px;"/></div>';
                echo '  <div id="element_to_pop_up" style="width:900px; height:750px;">
                        <a class="b-close">x<a/>
                        <iframe src="viewpost.php?id='.$row['ID'].'" style="width:100%; height:100%;"></iframe>
                        </div>'
                ?>

                <?php 

            }

        } catch(PDOException $e) {
            echo $e->getMessage();
        }
    ?>
    </a>

加载最后一个回声的弹出窗口。

编辑：

点击活动

    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();

            });

        });

    })(jQuery);




 (function(b){b.fn.bPopup=function(z,F){function K(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var h=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");h.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();h.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":A();b("<img />").load(function(){k(a.loadCallback);G(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:A(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+t}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);D();c.data("bPopup",a).data("id",e).css({left:"slideIn"==a.transition||"slideBack"==a.transition?"slideBack"==a.transition?g.scrollLeft()+u:-1*(v+s):l(!(!a.follow[0]&&m||f)),position:a.positionStyle||"absolute",top:"slideDown"==a.transition||"slideUp"==a.transition?"slideUp"==a.transition?g.scrollTop()+w:x+-1*r:n(!(!a.follow[1]&&p||f)),"z-index":a.zIndex+t+1}).each(function(){a.appending&&b(this).appendTo(a.appendTo)});H(!0)}function q(){a.modal&&b(".b-modal."+c.data("id")).fadeTo(a.speed,0,function(){b(this).remove()});a.scrollBar||b("html").css("overflow","auto");b(".b-modal."+e).unbind("click");g.unbind("keydown."+e);d.unbind("."+e).data("bPopup",0<d.data("bPopup")-1?d.data("bPopup")-1:null);c.undelegate(".bClose, ."+a.closeClass,"click."+e,q).data("bPopup",null);H();return!1}function G(h){var b=h.width(),e=h.height(),d={};a.contentContainer.css({height:e,width:b});e>=c.height()&&(d.height=c.height());b>=c.width()&&(d.width=c.width());r=c.outerHeight(!0);s=c.outerWidth(!0);D();a.contentContainer.css({height:"auto",width:"auto"});d.left=l(!(!a.follow[0]&&m||f));d.top=n(!(!a.follow[1]&&p||f));c.animate(d,250,function(){h.show();B=E()})}function L(){d.data("bPopup",t);c.delegate(".bClose, ."+a.closeClass,"click."+e,q);a.modalClose&&b(".b-modal."+e).css("cursor","pointer").bind("click",q);M||!a.follow[0]&&!a.follow[1]||d.bind("scroll."+e,function(){B&&c.dequeue().animate({left:a.follow[0]?l(!f):"auto",top:a.follow[1]?n(!f):"auto"},a.followSpeed,a.followEasing)}).bind("resize."+e,function(){w=y.innerHeight||d.height();u=y.innerWidth||d.width();if(B=E())clearTimeout(I),I=setTimeout(function(){D();c.dequeue().each(function(){f?b(this).css({left:v,top:x}):b(this).animate({left:a.follow[0]?l(!0):"auto",top:a.follow[1]?n(!0):"auto"},a.followSpeed,a.followEasing)})},50)});a.escClose&&g.bind("keydown."+e,function(a){27==a.which&&q()})}function H(b){function d(e){c.css({display:"block",opacity:1}).animate(e,a.speed,a.easing,function(){J(b)})}switch(b?a.transition:a.transitionClose||a.transition){case "slideIn":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()-(s||c.outerWidth(!0))-C});break;case "slideBack":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()+u+C});break;case "slideDown":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()-(r||c.outerHeight(!0))-C});break;case "slideUp":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()+w+C});break;default:c.stop().fadeTo(a.speed,b?1:0,function(){J(b)})}}function J(b){b?(L(),k(F),a.autoClose&&setTimeout(q,a.autoClose)):(c.hide(),k(a.onClose),a.loadUrl&&(a.contentContainer.empty(),c.css({height:"auto",width:"auto"})))}function l(a){return a?v+g.scrollLeft():v}function n(a){return a?x+g.scrollTop():x}function k(a){b.isFunction(a)&&a.call(c)}function D(){x=p?a.position[1]:Math.max(0,(w-c.outerHeight(!0))/2-a.amsl);v=m?a.position[0]:(u-c.outerWidth(!0))/2;B=E()}function E(){return w>c.outerHeight(!0)&&u>c.outerWidth(!0)}b.isFunction(z)&&(F=z,z=null);var a=b.extend({},b.fn.bPopup.defaults,z);a.scrollBar||b("html").css("overflow","hidden");var c=this,g=b(document),y=window,d=b(y),w=y.innerHeight||d.height(),u=y.innerWidth||d.width(),M=/OS 6(_\d)+/i.test(navigator.userAgent),C=200,t=0,e,B,p,m,f,x,v,r,s,I;c.close=function(){a=this.data("bPopup");e="__b-popup"+d.data("bPopup")+"__";q()};return c.each(function(){b(this).data("bPopup")||(k(a.onOpen),t=(d.data("bPopup")||0)+1,e="__b-popup"+t+"__",p="auto"!==a.position[1],m="auto"!==a.position[0],f="fixed"===a.positionStyle,r=c.outerHeight(!0),s=c.outerWidth(!0),a.loadUrl?K():A())})};b.fn.bPopup.defaults={amsl:50,appending:!0,appendTo:"body",autoClose:!1,closeClass:"b-close",content:"ajax",contentContainer:!1,easing:"swing",escClose:!0,follow:[!0,!0],followEasing:"swing",followSpeed:500,iframeAttr:'scrolling="no" frameborder="0"',loadCallback:!1,loadData:!1,loadUrl:!1,modal:!0,modalClose:!0,modalColor:"#000",onClose:!1,onOpen:!1,opacity:0.7,position:["auto","auto"],positionStyle:"absolute",scrollBar:!0,speed:250,transition:"fadeIn",transitionClose:!1,zIndex:9997}})(jQuery);

数据库表：

-- phpMyAdmin SQL Dump
-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Machine: localhost
-- Gegenereerd op: 24 jun 2015 om 19:39
-- Serverversie: 5.1.73-log
-- PHP-versie: 5.5.25

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Databank: `svenodj118_trade`
--

-- --------------------------------------------------------

--
-- Tabelstructuur voor tabel `voertuigen`
--

CREATE TABLE IF NOT EXISTS `voertuigen` (
  `ID` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `f1` varchar(255) DEFAULT NULL,
  `f2` varchar(255) DEFAULT NULL,
  `f3` varchar(255) DEFAULT NULL,
  `f4` varchar(255) DEFAULT NULL,
  `f5` varchar(255) DEFAULT NULL,
  `f6` varchar(255) DEFAULT NULL,
  `categorie` varchar(255) DEFAULT NULL,
  `merk` varchar(255) DEFAULT NULL,
  `carrosserie` varchar(255) DEFAULT NULL,
  `brandstof` varchar(255) DEFAULT NULL,
  `transmissie` varchar(255) DEFAULT NULL,
  `motorinhoud` varchar(255) DEFAULT NULL,
  `bouwjaar` varchar(255) DEFAULT NULL,
  `kenteken` varchar(255) DEFAULT NULL,
  `apk` varchar(255) DEFAULT NULL,
  `garantie` varchar(255) DEFAULT NULL,
  `prijs` varchar(255) DEFAULT NULL,
  `kostenrijklaar` varchar(255) DEFAULT NULL,
  `opties` text,
  `overig` text,
  `postDate` datetime DEFAULT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;

--
-- Gegevens worden geëxporteerd voor tabel `voertuigen`
--

INSERT INTO `voertuigen` (`ID`, `f1`, `f2`, `f3`, `f4`, `f5`, `f6`, `categorie`, `merk`, `carrosserie`, `brandstof`, `transmissie`, `motorinhoud`, `bouwjaar`, `kenteken`, `apk`, `garantie`, `prijs`, `kostenrijklaar`, `opties`, `overig`, `postDate`) VALUES
(29, 'image3.jpg', '', '', '', '', '', 'pauto', 'Mercedes A klasse', 'Cabrio', 'Benzine', 'Automaat', '9500 cc', '01/2012', '12-RDP-9', '01/2016', '3 maand', '35000', '129.000KM', '<p>- Airco</p>\r\n<p>- Automatische ramen</p>\r\n<p>- Touchscreen display</p>', '<p>Een Hele goed auto!</p>', '2015-06-21 15:11:40'),
(30, 'bedwagen.jpg', '', '', '', '', '', 'pauto', '', '', '', '', '', '', '', '', '', '', 'KM', '', '', '2015-06-23 22:44:55');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

配置：

<?php
ob_start();
session_start();

//database credentials
define('DBHOST','localhost');
define('DBUSER','...');
define('DBPASS','...');
define('DBNAME','...');

$db = new PDO("mysql:host=".DBHOST.";port=8889;dbname=".DBNAME, DBUSER, DBPASS);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 ?>

语句：

try {

            $stmt = $db->query('SELECT * FROM voertuigen WHERE categorie = "pauto" ORDER BY ID DESC');
            while($row = $stmt->fetch()){

3 个答案:

答案 0 :(得分：1)

尝试为所有项目绑定唯一ID，例如

<强> PHP 

<?php

while($row = $stmt->fetch())
{
?>

    <a href="#" data-rel="<?php echo $row['ID']; ?>" id="car-id-"><?php echo $row['ID']; ?></a>

<?php
}
?>

<强> JS 

<script>

 $("a[id^='car-id-']").bind("click", function() {
 var myid = $(this).attr("data-rel");
 alert(myid);
 });

</script>

不同项目的ID将显示在警告

中

答案 1 :(得分：0)

您应该简化代码并在HTML之外放置样式 一个小例子，使这个更清洁，不使用id选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            a.car {
                width :400px;
                height : 400px;
                border: 1px solid #A2A2A2;
                display : block;
                float : left;
                margin : 0 10px;
                background: #C2C2C2;
                padding : 15px;
                text-decoration : none;
            }
            div.popup_content {
                display : none;
                position : absolute;
                height : 100vh;
                width  : 99%;
                background : #C2C2C2;
            }
            div.popup_content a {
                display : block;
                text-align : right;
            }

        </style>
    </head>
    <body>
        <div id="cars">
    <?php
        try {
           $stmt = $db->query('SELECT * FROM voertuigen WHERE categorie = "pauto" ORDER BY ID DESC');
           while($row = $stmt->fetch()){
                echo <<<CAR
                    <a href="#" class="car">
                        <img src="http://searchonit.nl/VosAutoTrading/admin/images/{$row['f1']}" style="width:300px; height:200px;"/>
                        <h2>{$row['merk']}</h2>
                        <p>
                            <b>{$row['kostenrijklaar']}</b><br />
                            <b>{$row['brandstof']}</b><br />
                            <b>{$row['bouwjaar']}</b><br />
                        </p>
                        <span>&euro; {$row['prijs']}</span>
                    </a>
                    <div class="popup_content">
                        <a href="#">x</a>
                         <iframe src="viewpost.php?id='.{$row['id']}.'" style="width:100%; height:100%;"></iframe>
                    </div>
    CAR;

            }

        } catch(PDOException $e) {
            echo $e->getMessage();
        }
    ?>  
            <script>
                $(function() {
                    $('.car').on('click', function(e) {
                        e.preventDefault();
                        $(this).next().fadeIn();
                    });
                    $('.popup_content a').on('click', function(e) {
                        e.preventDefault();
                        $(this).parent().fadeOut();
                    });
                });
            </script>
        </div>
    </body>
</html>

答案 2 :(得分：0)

我解决了它，但感谢所有帮助，我创建了一个onload函数，如果设置了id，它将弹出弹出窗口！

相关问题
最新问题