У меня возникают проблемы с отображением содержимого из массива (который может содержать от 0 до 3 элементов) в html с помощью jquery. Все это находится в одном файле php.

<?php
... other code
$watchlistArray = array();
while ($row = mysqli_fetch_assoc($result)) {
    $watchlistArray[] = $row;
}
?>

Массив будет содержать от 0 до 3 элементов. Примеры результатов, полученных с использованием

<?php echo json_encode($watchlistArray)?>

2 результата

[{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"58","prod_name":"A brand new Iphone 8!","prod_highest_price":"795.00","prod_picture":"1.jpg","prod_end_date":"2018-09-24 20:40:00"}]

3 результата

[{"prod_id":"42","prod_name":"A new sofa","prod_highest_price":"153.00","prod_picture":"3.jpg","prod_end_date":"2018-04-06 20:40:00"},{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"40","prod_name":"An old chair","prod_highest_price":null,"prod_picture":"2.jpg","prod_end_date":"2018-04-12 20:40:00"}]

Теперь для отображения этого с помощью jquery и html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            size = <?php echo sizeof($watchlistArray);?>;
            if (size === 0) {
                $('#watchlist0').html('No one has bidded on this item!');
            }

            if (size >= 1) {
                $('#watchlist0').html('                        <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[0]["prod_id"]; ?>">\n' +
                    '                            <img src="../Browse/Images/<?php echo $watchlistArray[0]["prod_picture"] ?>"\n' +
                    '                                 class="img-rounded img-responsive">\n' +
                    '                        </a>\n' +
                    '                        <h4><?php echo $watchlistArray[0]["prod_name"] ?></h4>\n' +
                    '                        Current price: <strong><?php echo $watchlistArray[0]["prod_highest_price"] ?></strong>');
            }

            if (size >= 2) {
                $('#watchlist1').html('                        <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[1]["prod_id"]; ?>">\n' +
                    '                            <img src="../Browse/Images/<?php echo $watchlistArray[1]["prod_picture"] ?>"\n' +
                    '                                 class="img-rounded img-responsive">\n' +
                    '                        </a>\n' +
                    '                        <h4><?php echo $watchlistArray[1]["prod_name"] ?></h4>\n' +
                    '                        Current price: <strong><?php echo $watchlistArray[1]["prod_highest_price"] ?></strong>');
            }

            if (size >= 3) {
                alert ("case 3")
                $('#watchlist2').html('                        <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[2]["prod_id"]; ?>">\n' +
                    '                            <img src="../Browse/Images/<?php echo $watchlistArray[2]["prod_picture"] ?>"\n' +
                    '                                 class="img-rounded img-responsive">\n' +
                    '                        </a>\n' +
                    '                        <h4><?php echo $watchlistArray[2]["prod_name"] ?></h4>\n' +
                    '                        Current price: <strong><?php echo $watchlistArray[2]["prod_highest_price"] ?></strong>');
            }
        })
    </script>

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4" align="center" id="watchlist0">
        </div>
        <div class="col-sm-4" align="center" id="watchlist1">
        </div>
        <div class="col-sm-4" align="center" id="watchlist2">
        </div>
    </div>
</div>
</body>
</html>

Я пробовал это разными способами (используя оператор switch, цикл и т. Д.), Но всегда сталкивался с одной и той же проблемой. Информация отображается только тогда, когда в массиве 3 элемента. Если я возьму код, который выполняется при размере> = 3, то я получу 2 изображения и другую информацию, отображаемую, когда есть как 3, так и 2 элемента. Это действительно странно, и я пытался часами - пожалуйста, помогите отстающему ученику.

ОБНОВЛЕНИЕ

Спасибо всем за предложения. Поскольку вывод является статическим, я реализовал это в php, используя оператор switch с эхом html.

<?php
$arrSize = sizeof($watchlistArray);
switch ($arrSize) {
    case 0:
        echo "case 0 HTML";
        break;

    case 1:
        echo 'case 1 HTML';
        break;

    case 2:
        echo 'case 3 HTML';
        break;

    case 3:
        echo 'case 3 HTML';
}
?>

Возможно, это не самый эффективный способ сделать это (поскольку каждое эхо относится к одним и тем же элементам HTML), но он работает!

0
AwksTurts 12 Мар 2018 в 23:17

2 ответа

Лучший ответ

Даже если вы решили проблему - как я только что увидел, я отправлю свой ответ. Может быть, это поможет вам в дальнейшем. Я не уверен на 100%, чего вы пытались достичь с помощью этих условий, но я предположил, что вы хотите отобразить div col-sm-4 для каждого продукта, найденного в $watchlistArray.

В самом деле, js не требуется, если только вы не выполняете запрос ajax для получения данных из базы данных. Обратите внимание, что в моем коде я изменил имя переменной $watchlistArray на $products, потому что нашел его более подходящим для меня. В принципе, код считывает все продукты в списке продуктов и отображает их в ячейках col-sm-4 . Если количество продуктов в списке продуктов превышает максимальное количество продуктов, отображаемых в строке ( 3 в вашем случае), то создается новая строка. Вы можете запустить код как есть.

Примечание: старайтесь избегать использования конструкций php внутри кода js. Вместо этого значения переменных PHP могут быть переданы в качестве аргументов функциям js, которые могут вызываться для атрибутов событий (onclick, onload и т. Д.) Элементов html.

<?php
// This is just a hard-coded list. Build it as you wish (with db data for example).
$products = [
    [
        'prod_id' => '42',
        'prod_name' => 'A new sofa',
        'prod_highest_price' => '153.00',
        'prod_picture' => '3.jpg',
        'prod_end_date' => '2018-04-06 20:40:00'
    ],
    [
        'prod_id' => '41',
        'prod_name' => 'An old desk',
        'prod_highest_price' => '69.30',
        'prod_picture' => '2.jpg',
        'prod_end_date' => '2018-04-05 20:40:00'
    ],
    [
        'prod_id' => '40',
        'prod_name' => 'An old chair',
        'prod_highest_price' => null,
        'prod_picture' => '2.jpg',
        'prod_end_date' => '2018-04-12 20:40:00'
    ],
    [
        'prod_id' => '57',
        'prod_name' => 'An interesting book',
        'prod_highest_price' => '18.86',
        'prod_picture' => '2.jpg',
        'prod_end_date' => '2018-04-21 15:18:23'
    ],
    [
        'prod_id' => '58',
        'prod_name' => 'A big apple',
        'prod_highest_price' => '12.19',
        'prod_picture' => '2.jpg',
        'prod_end_date' => '2018-04-23 03:09:55'
    ],
];
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <!-- CSS resources -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

        <!-- JS resources -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

        <style type="text/css">
            .row {
                padding-top: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #ccc;
            }

            .product {
                text-align: center;
            }
        </style>
    <body>

        <div class="container">
            <?php
            if (isset($products) && $products) {
                $numberOfProductsPerRow = 3; /* How many products should be allowed in a row? */
                $numberOfDisplayedProductsPerRow = 0; /* How many products are already displayed in a row? */

                foreach ($products as $key => $product) {
                    $productId = $product['prod_id'];
                    $productPicture = $product['prod_picture'];
                    $productName = $product['prod_name'];
                    $productHighestPrice = $product['prod_highest_price'];

                    if ($numberOfDisplayedProductsPerRow % $numberOfProductsPerRow === 0) {
                        ?>
                        <div class="row">
                            <?php
                        }
                        ?>
                        <div class="col-sm-4 product" id="product<?php echo $key; ?>">
                            <a href="../product/productPage.php?prod_ID=<?php echo $productId; ?>">
                                <img src="../Browse/Images/<?php echo $productPicture; ?>" class="img-rounded img-responsive" alt="<?php echo $productName; ?>">
                            </a>

                            <h4>
                                <?php echo $productName; ?>
                            </h4>

                            <div>
                                Current price: <span class="highest-price"><?php echo $productHighestPrice; ?></span>
                            </div>
                        </div>
                        <?php
                        $numberOfDisplayedProductsPerRow++;

                        if ($numberOfDisplayedProductsPerRow === $numberOfProductsPerRow) {
                            $numberOfDisplayedProductsPerRow = 0;
                            ?>
                        </div>
                        <?php
                    }
                }
            } else {
                ?>
                <div class="row">
                    <div class="col-sm-12">
                        No one has bidded on this item!
                    </div>
                </div>
                <?php
            }
            ?>
        </div>

    </body>
</html>
0
dakis 13 Мар 2018 в 12:28

Ваши условия совпадают ..

if(size>=2) 

А также

if(size>=3) 

Оба будут вызываться, когда есть 3 элемента .. попробуйте заменить их на

if(size==2)
...........
if(size>=3)
0
nitrex 12 Мар 2018 в 20:24