代码片段(二)

(四)使用相对布局实现一个简单的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="OK" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="Cancel" />
</RelativeLayout>


 

(五)在一个布局文件中引用另一个布局文件,使用include标签

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:visibility="gone"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</LinearLayout>  
<include 
android:visibility="visible"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
layout="@layout/progressbarlayout"
></include>
</FrameLayout>

 

(六)隐藏软键盘

InputMethodManager imManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
IBinder mBinder = getCurrentFocus().getWindowToken();
imManager.hideSoftInputFromWindow(mBinder,InputMethodManager.HIDE_NOT_ALWAYS);
代码片段一:<ul id="specsChooseMainDisplay" class="list-unstyled specsChooseDisplay"><button data-value-id="1" data-value-price="4" data-value-goodnum="4" class="specifications specifications-0">一盒装4个月饼[月饼礼盒1]</button><button data-value-id="5" data-value-price="4" data-value-goodnum="4" class="specifications specifications-0">一盒装4个月饼[月饼礼盒1]</button></ul> 代码片段:<td id="specsChooseModalDisplay"><button data-value-id="1" data-value-price="4" data-value-goodnum="4" class="specifications specifications-0">一盒装4个月饼[月饼礼盒1]</button><button data-value-id="3" data-value-price="4" data-value-goodnum="4" class="specifications specifications-0">一盒装4个月饼[月饼礼盒1]</button></td> 代码片段三:$(document).ready(function() { // 获取父元素 let container = document.getElementById('specsChooseMainDisplay'); // 添加事件监听器 container.addEventListener('click', function(event) { // 获取点击的目标元素 let target = event.target; // 判断目标元素是否为按钮 if (target.tagName === 'BUTTON') { // 获取所有按钮 let buttons = container.getElementsByTagName('BUTTON'); // 移除其他按钮的 specsChooseHover 类 for (let i = 0; i < buttons.length; i++) { if (buttons[i] !== target) { buttons[i].classList.remove('specsChooseHover'); buttons[i].removeAttribute('id'); } } // 切换目标按钮的 specsChooseHover 类 target.classList.toggle('specsChooseHover'); target.setAttribute('id', 'specsChooseHover'); specificationSelection(); } }); }); 请问,在代码片段三的基础上,该如何修改,才能使当点击代码片段一的某个button时,与其data-value-id的值一致的代码片段的button也添加class的值specsChooseHover,且当代码片段一的button的class的specsChooseHover和id的specsChooseHover被移除时,代码片段的button也发生同样的改变;并且而当点击代码片段的某个button时,与其data-value-id的值一致的代码片段一的button也添加class的值specsChooseHover,并且当代码片段的button的class的specsChooseHover和id的specsChooseHover被移除时,代码片段一的button也发生同样的改变
07-23
要实现当点击代码片段一的某个button时,与其data-value-id的值一致的代码片段的button也添加class的值specsChooseHover,并且当代码片段一的button的class的specsChooseHover和id的specsChooseHover被移除时,代码片段的button也发生同样的改变;当点击代码片段的某个button时,与其data-value-id的值一致的代码片段一的button也添加class的值specsChooseHover,并且当代码片段的button的class的specsChooseHover和id的specsChooseHover被移除时,代码片段一的button也发生同样的改变,可以进行以下修改: ```javascript $(document).ready(function() { // 获取父元素 let container = document.getElementById('specsChooseMainDisplay'); // 获取代码片段的父元素 let modalContainer = document.getElementById('specsChooseModalDisplay'); // 添加事件监听器到代码片段一按钮 container.addEventListener('click', function(event) { // 获取点击的目标元素 let target = event.target; // 判断目标元素是否为按钮 if (target.tagName === 'BUTTON') { // 获取目标按钮的data-value-id值 let targetId = target.getAttribute('data-value-id'); // 获取代码片段一中所有按钮 let buttons = container.getElementsByTagName('BUTTON'); // 移除其他按钮的specsChooseHover类和id for (let i = 0; i < buttons.length; i++) { if (buttons[i] !== target) { buttons[i].classList.remove('specsChooseHover'); buttons[i].removeAttribute('id'); } } // 获取代码片段中所有按钮 let modalButtons = modalContainer.getElementsByTagName('BUTTON'); // 遍历代码片段中的按钮 for (let i = 0; i < modalButtons.length; i++) { // 判断按钮的data-value-id值与目标按钮的data-value-id值是否一致 if (modalButtons[i].getAttribute('data-value-id') === targetId) { // 添加或移除class的值specsChooseHover modalButtons[i].classList.toggle('specsChooseHover'); } } // 切换目标按钮的specsChooseHover类和id target.classList.toggle('specsChooseHover'); target.setAttribute('id', 'specsChooseHover'); specificationSelection(); } }); // 添加事件监听器到代码片段按钮 modalContainer.addEventListener('click', function(event) { // 获取点击的目标元素 let target = event.target; // 判断目标元素是否为按钮 if (target.tagName === 'BUTTON') { // 获取目标按钮的data-value-id值 let targetId = target.getAttribute('data-value-id'); // 获取代码片段中所有按钮 let modalButtons = modalContainer.getElementsByTagName('BUTTON'); // 移除其他按钮的specsChooseHover类和id for (let i = 0; i < modalButtons.length; i++) { if (modalButtons[i] !== target) { modalButtons[i].classList.remove('specsChooseHover'); modalButtons[i].removeAttribute('id'); } } // 获取代码片段一中所有按钮 let buttons = container.getElementsByTagName('BUTTON'); // 遍历代码片段一中的按钮 for (let i = 0; i < buttons.length; i++) { // 判断按钮的data-value-id值与目标按钮的data-value-id值是否一致 if (buttons[i].getAttribute('data-value-id') === targetId) { // 添加或移除class的值specsChooseHover buttons[i].classList.toggle('specsChooseHover'); } } // 切换目标按钮的specsChooseHover类和id target.classList.toggle('specsChooseHover'); target.setAttribute('id', 'specsChooseHover'); specificationSelection(); } }); }); ``` 在上述修改中,我们添加了一个事件监听器到代码片段的父元素modalContainer,并在其中实现了对代码片段按钮的操作。当点击代码片段的某个button时,与其data-value-id的值一致的代码片段一的button也会添加class的值specsChooseHover,并且当代码片段的button的class的specsChooseHover和id的specsChooseHover被移除时,代码片段一的button也会发生同样的改变。 这样,无论是点击代码片段一还是代码片段的按钮,与其data-value-id的值一致的另一段代码中的按钮都会添加class的值specsChooseHover,并且当其中一个按钮的class的specsChooseHover和id的specsChooseHover被移除时,另一段代码中的对应按钮也会发生同样的改变。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值