个人中心
gpt4 book ai didi

javascript - div与包含复选框的数组的动态对齐

转载 作者：太空宇宙 更新时间：2023-11-04 02:48:54 25 4
gpt4 key购买 nike

首先，我会为我的语法道歉我是法语(就像我已经在语法中说法语 su**，但我正在努力提高自己)

因此，我有一个包含数组的表格，该表格是通过上传 Excel 列表自动生成的。生成的表包含复选框。当您单击复选框时，会出现一个 Div。在此 div 中，您可以编写在 excel 文档中报告的文本，并且您必须提交以供验证。摘要这是一份客人核对 list 。

表格的长度是可变的，我会将 Div 与被单击的复选框对齐。 (您单击并在右侧出现 div)。

我试过固定位置，但这不够精确。有人可以告诉我如何执行此操作或我必须在哪里搜索？ 

<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="test.css" media="all"/>
    <title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">

<form action = "check.php" method="GET">
 <div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input      type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<a href="#" class="show_hide">Cacher</a></div>

<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite) 
{
        if($invite[0] != '' && $invite[1] == '')
{
echo '  <li>
 <div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'"   type="checkbox" style="visibility:hidden" />
 <label for="'.$i.'"><i class="fa fa-check"></i></label>

</li>';
  }

  $i++;

嗯，我不知道代码是否更清楚，但我想要动态对齐的 Div 是“SlidingDiv”谢谢!

before checkbox click Once checkbox is clicked and un-align of the Div

最佳答案

首先是带有一些有用类的 HTML 结构。

<form action = "check.php" method="GET">
    <!-- This div will never be used directly but rather cloned-->
    <div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
        <input type="checkbox" name="vestiaire[]" />
        <label>Vestiaire</label> 
        <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
        <!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
        <a href="#" class="show_hide_btn">Cacher</a>
    </div>

    <ul>
        <li class="item">
            <div class="circle"></div>
            <h4 class="item-name">bla</h4>
            <input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
            <label for="a"><i class="fa fa-check"></i></label>

        </li>
        <li class="item">
            <div class="circle"></div>
            <h4 class="item-name">blo</h4>
            <input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
            <label for="b"><i class="fa fa-check"></i></label>
        </li>
    </ul>
</form>

然后，jQuery 使其正常工作:

$(document).ready(function(){
    var originalSlidingDiv = $('#originalSlidingDiv'),
        slidingDiv;

    $(".slidingDiv").hide();
    $(".show_hide").show();

    // When clicking each item's checkbox.
    $('.show_hide_cb').on('click', function() {

        // Check if we appended the slidingDiv already.
        slidingDiv = $(this).parent().find('.slidingDiv');

        // If not, we clone it, remove its id then append it to the parent (.item).
        if (slidingDiv.length === 0) {
            slidingDiv = originalSlidingDiv.clone(true, true)
                            .attr('id', '')
                            .appendTo($(this).parent());
        }

        // Finally we toggle display.
        slidingDiv.slideToggle();
    });

    // When clicking the hide button (Cacher).
    $('.show_hide_btn').on('click', function(e) {
        e.preventDefault();

        // $(this).parent() is the .slidingDiv element, we toggle display.
        $(this).parent().slideToggle();

        // $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
        $(this).parent().siblings('.show_hide_cb').attr('checked', false);
    });
});

您可以在评论中找到足够的解释。基本上这将在必要时克隆 .slidingDiv，将其附加到单击的元素，并切换其显示，但也会在我们单击“Cacher”按钮时隐藏 slidingDiv。它还将取消选中复选框以返回到初始状态。

最后，使用小 CSS 使其看起来如您所愿:

.slidingDiv {
    text-align: center;
    float: left;
}

.item {
    margin-top: 1em; /* add some margin as it's removed from the h4 */
}

.circle {
    float: left;
}

.item-name {
    display: inline-block;
    margin-top: 0; /* remove the margin to allow alignment */
}

JSFiddle:https://jsfiddle.net/superbiche/fhqcvbpe/

是的，我也是法国人:)

关于javascript - div与包含复选框的数组的动态对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33371146/

25 4 0
文章推荐： c - 在 Ida pro 中反汇编 c 函数
文章推荐： Node.js 中 Javascript 的新运算符
文章推荐： c - 为什么这个 org-babel c 片段没有产生输出？
文章推荐： node.js - 使用 pm2 启动 sails 应用程序时出错
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com