javascript - 使用 jQuery 和正确的按钮 ID 将正确的内容应用到模式中

Question

所以让我们开门见山；

我正在使用 WP 主题，显然它有一些小部件。现在我想为每个小部件添加 1 个按钮。

Var instance 将是小部件，因此只要有小部件，我只添加按钮。a 标签被设计为一个按钮。

<?php
    $i = 0;
    while($i <= count($instance)) {
        $id = $i
    }

echo "<a id='stats".$id."' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
?>

对于每个(？)按钮，id 应该+1，所以小组件 1 将包含一个带有 ID="stats0" 的按钮，小组件 2 将包含一个带有 ID="stats1"< 的按钮/strong>等等。

这样我就可以通过 jQuery 获取元素并显示具有正确内容的模式，对吗？

但是问题本身；当我必须在循环之外设置按钮时，如何使 id 加 1？

更新正如特林科特提到的，我并不清楚我想要完成什么。

您可以查看实时版本:here .

如果向下滚动到第二部分，您将看到 6 个圆圈，其中包含图像和文本。主题的制作者在代码中将这些东西称为实例；

 function widget($args, $instance)
{

    extract($args);


    echo $before_widget;

    ?>



    <div class="col-lg-3 col-sm-3 focus-box" data-scrollreveal="enter left after 0.15s over 1s">

        <?php if( !empty($instance['image_uri']) ): ?>
        <div class="service-icon">

            <?php if( !empty($instance['link']) ): ?>

                <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

            <?php else: ?>

                <i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->

            <?php endif; ?>


        </div>
        <?php endif; ?>

        <h5 class="red-border-bottom"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h5>
        <!-- FOCUS HEADING -->


        <?php 
            if( !empty($instance['text']) ):

                echo '<p>';
                    echo htmlspecialchars_decode(apply_filters('widget_title', $instance['text']));
                echo '</p>';
            endif;
        ?>

        <?php
            for($i =0; $i <= count($instance); $i++) {
                echo "<a id='stats$i' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
            }
        ?>
    </div>



    <?php

    echo $after_widget;


}

在这个函数中，元素被一一渲染，如果我是对的？

所以我想做的就是为每个元素应用一个按钮。设置 ID 后，我可以在 jQuery 中引用一些内容来定义模型的内容。这是执行元素渲染的代码

<div class="row focus-section">



        <?php

        if ( is_active_sidebar( 'sidebar-ourfocus' ) ) :

            dynamic_sidebar( 'sidebar-ourfocus' );

        else:

            the_widget( 'zerif_ourfocus','title=PARALLAX EFFECT&text=Create memorable pages with smooth parallax effects that everyone loves. Also, use our lightweight content slider offering you smooth and great-looking animations.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/parallax.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=WOOCOMMERCE&text=Build a front page for your WooCommerce store in a matter of minutes. The neat and clean presentation will help your sales and make your store accessible to everyone.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/woo.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=CUSTOM CONTENT BLOCKS&text=Showcase your team, products, clients, about info, testimonials, latest posts from the blog, contact form, additional calls to action. Everything translation ready.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ccc.png", array('before_widget' => '', 'after_widget' => '') );

            the_widget( 'zerif_ourfocus','title=GO PRO FOR MORE FEATURES&text=Get new content blocks: pricing table, Google Maps, and more. Change the sections order, display each block exactly where you need it, customize the blocks with whatever colors you wish.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ti-logo.png", array('before_widget' => '', 'after_widget' => '') );

        endif;

        ?>



</div>

现在你可能需要知道“dynamic_sidebar”是什么......但直到现在我还没有找到那部分

Answer 1

您应该在循环内生成按钮，并且当您唯一要做的就是使它们相等时，您不需要两个变量。此类循环最好使用 for 循环编写:

for($i =0; $i <= count($instance); $i++) {
    echo "<a id='stats$i' data-toggle='modal' data-target='#Modal'
        class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
}

另请注意，id 属性缺少结束引号，并且您可以嵌入变量而无需中断带引号的字符串。

jQuery 解决方案

您还可以决定单独保留 php 代码，而仅使用 jQuery 操作文档。对于初学者，您可以向每个具有类 pixeden 的实例添加一个 id 属性。然后您可以捕获这些点击事件，以执行任何进一步的操作:

jQuery(function($) {
  // Add an id attribute to the instances:
  $(".pixeden").each(function(idx) {
    $(this).attr('id', 'instance' + idx);
  })
  // Capture click event on any of the instances:
  $(".pixeden").click(function () {
      console.log('you clicked instance with id=', this.id);
      // any other action follows here...
  });
}, jQuery);