Question

我有一个聊天网络应用程序，需要在聊天设置中隐藏/显示头像。

你会如何有效地解决这个问题？这样您就可以轻松地显示图像，而无需解析所有图像。

发布此问题并回答那些像我一样需要这样的事情的人

Answer 1

以下是切换图像可见性的链接的快速示例

<强> HTML

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mainpage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|top" />

            <Button
                android:id="@+id/btn"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginBottom="-40dp"
                android:gravity="center"
                android:padding="5dp"
                android:textColor="@android:color/white"
                android:textSize="20sp"


                ></Button>


        </RelativeLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.5"
            android:gravity="top"

            android:padding="5dip">

        </LinearLayout>
    </LinearLayout>

    <SlidingDrawer
        android:id="@+id/drawer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:content="@+id/content"
        android:handle="@+id/handle"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/handle"
            android:layout_width="100dp"
            android:layout_height="500dp"
            android:src="@android:color/white" />

        <LinearLayout
            android:id="@id/content"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

        </LinearLayout>

    </SlidingDrawer>
</FrameLayout>

<强>的jQuery

<img src="http://placehold.it/50/50" class="img">
<img src="http://placehold.it/50/50" class="img">
<img src="http://placehold.it/50/50" class="img">

<a href="#" class="toggle">Toggle images</a>

示例：http://jsfiddle.net/d0a7xofn/

Answer 2

有些人可能会认为通过这样的查询隐藏/显示图像是可以的：

假设类.hide {display: none}和图像的默认显示状态是阻止。

示例代码：

 var images = document.querySelectorAll('.images');

 images.toggleClass('hide');

虽然这样可行但你必须经历所有常见的图像。

更好的方法是抓取图像的容器，并根据可以在容器本身上切换的类隐藏/显示图像。

示例代码：

拥有以下CSS：

.hide .images {display: none;}

以及以下jQuery：

function toggleImages() { 

   var container = $('#container');

   container.toggleClass('hide'); 

}

最终结果是：将在容器上切换类，并且css样式将应用更改。

希望有人觉得这很有帮助！这个应用程序将是聊天用户在聊天中切换头像的设置。

有效切换多个图像的可见性

2 个答案: