將正確的內容應用於使用jQuery的模式，並使用正確的按鈕ID

Question

因此，讓我們直指點;

我使用WP主題，顯然它有一些小部件。 現在我想爲每個小部件添加1個按鈕。

Var 實例將是小部件，所以我只添加按鈕，只要有小部件。 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，所以 的widget 1將包含一個按鈕ID = 「stats0」，的widget 2將有一個按鈕與ID = 「stats1」等等。

這樣我就可以通過jQuery獲取元素，並顯示正確的內容模式，是否正確？

但問題本身;當我必須在循環之外設置按鈕時，如何讓id增加1？

UPDATE 正如Trincot所說，我不太清楚什麼是我想要完成的事情。

你可以看看現場版本是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的文件。對於初學者，您可以將id屬性添加到實例中的每一個實例，其具有類別pixeden。然後你可以捕獲這些事件上的點擊事件，以執行任何進一步的行動：

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);