<div> <div class="box"> <div class="titles">标题</div> <div class="content"><input class="layui-input{_disabledClass}" lay-vertype="tips" lay-verify="{_required}" {_readonly} {_disabled} style="width:{width}"> </div> </div> </div> <div> <div class="layui-btn-group"> <button type="button" class="layui-btn" id="row">横排</button> <button type="button" class="layui-btn" id="col">竖排</button> </div> </div> </div> 点击横排按钮将标题和输入框横向排序 点击竖排按钮将标题和输入框竖排
时间: 2023-10-06 11:09:16 浏览: 571
可以使用 jQuery 实现点击横排按钮将标题和输入框横向排序,点击竖排按钮将标题和输入框竖排。代码如下:
```
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("#row").click(function() {
$(".box").css("display", "flex");
$(".titles").css("order", "1");
$(".content").css("order", "2");
});
$("#col").click(function() {
$(".box").css("display", "block");
$(".titles").css("order", "");
$(".content").css("order", "");
});
});
</script>
```
这段代码会监听 class 为 layui-btn 的按钮的点击事件,然后根据点击的按钮的 id 分别将标题和输入框横向排序或竖向排序。具体实现方式是将 box 的 display 属性设置为 flex 或 block,然后将 titles 和 content 的 order 属性设置为 1 和 2,或者设置为空。
相关问题
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">标题1</li> <li lay-id="2">标题2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item">内容-2</div> </div> </div> </div> <div class="layui-tab-item">主体-2</div> </div> </div>在laravel7.0框架里怎么优化这段代码
这段代码的主要问题在于嵌套层数过多,不易维护和理解。以下是一些优化建议:
1. 使用 Blade 模板语法来代替 HTML 标签。这样可以更方便地管理代码,也更容易防止 XSS 攻击。
2. 将嵌套的 `div` 和 `ul` 标签拆分成不同的 Blade 模板文件,以便于复用和维护。
3. 使用 CSS 类和 ID 来统一管理样式和 DOM 元素,避免过多的内联样式和重复的代码。
4. 将 JavaScript 代码放到单独的文件中,以便于管理和调试。
以下是一个可能的优化示例:
1. 创建 `creative_pack.blade.php` 模板文件,包含创意包的 HTML 和 JavaScript 代码:
```
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="creative-pack-{{ $id }}">
<div class="layui-btn addContent" lay-active="addContent">添加创意包</div>
<ul class="layui-tab-title" style="width: 85%">
@foreach ($titles as $title)
<li class="{{ $loop->first ? 'layui-this' : '' }}" lay-id="{{ $loop->iteration }}">{{ $title }}</li>
@endforeach
</ul>
<div class="layui-tab-content">
@foreach ($contents as $content)
<div class="layui-tab-item{{ $loop->first ? ' layui-show' : '' }}">{{ $content }}</div>
@endforeach
</div>
</div>
<script>
$(function() {
// 在这里添加你的 JavaScript 代码
});
</script>
```
2. 在父模板文件中,使用 `@include` 指令来引入 `creative_pack.blade.php` 模板文件:
```
<!DOCTYPE html>
<html>
<head>
<title>My Laravel App</title>
<link rel="stylesheet" href="{{ asset('layui/css/layui.css') }}">
<script src="{{ asset('layui/layui.js') }}"></script>
</head>
<body>
<div class="container">
@include('creative_pack', ['id' => 1, 'titles' => ['标题1', '标题2'], 'contents' => ['内容-1', '内容-2']])
@include('creative_pack', ['id' => 2, 'titles' => ['标题3', '标题4'], 'contents' => ['内容-3', '内容-4']])
</div>
<script>
$(function() {
// 在这里添加你的全局 JavaScript 代码
});
</script>
</body>
</html>
```
3. 使用 CSS 类和 ID 来统一管理样式和 DOM 元素:
```
<style>
.layui-tab-title, .layui-tab-content {
width: 85%;
}
#content {
/* 在这里添加你的样式 */
}
</style>
```
通过以上优化,可以使代码更易读、易维护,并且更加安全和健壮。
// 自由代码组件 <div id="{id}" class="layui-form-item {selected}" data-id="{id}" data-tag="{tag}" data-index="{index}" style="height:50px"> <!-- 任意添加html代码 --> <div> <div class="box"> <div class="titles" style="margin-top: 17px;">标题</div> <div class="content" style="margin-top:10px"> <div class="layui-form-item"> <div class="ord" style="margin-left:10px"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </div> </div> <div style="margin-top:20px;position:absolute"> <div class="layui-btn-group"> <button type="button" class="layui-btn" id="row">横排</button> <button type="button" class="layui-btn" id="col">竖排</button> </div> </div> </div> $(function () { $(".layui-btn").click(function () { $(".layui-btn").css("background-color", ""); $(this).css("background-color", "#5FB878"); }); $("#row").click(function () { $(".box").css("display", "flex"); $(".titles").css("order", "1"); $(".content").css("order", "2"); $(".layui-input").css("margin-left","10px") }); $("#col").click(function () { $(".box").css("display", "block"); $(".titles").css("order", ""); $(".content").css("order", ""); $(".layui-input").css("margin-left","0px") }); }); 如何修改为当点击竖排时 男女也是竖向排序
您可以将radio控件的外层div的display属性改为"flex",并将flex-direction属性改为"column",这样就可以实现竖向排序。具体代码如下:
```
<div class="ord" style="margin-left:10px;display:flex;flex-direction:column;">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
```
然后再将竖排按钮的click事件中的$(".layui-input").css("margin-left","10px")改为$(".layui-input").css("margin-left",""),去掉marginLeft属性即可。完整代码如下:
```
$("#col").click(function () {
$(".box").css("display", "block");
$(".titles").css("order", "");
$(".content").css("order", "");
$(".layui-input").css("margin-left","");
$(".ord").css("display","flex");
$(".ord").css("flex-direction","column");
});
```
阅读全文