点击按钮同时改变文字和文本

博客介绍了在项目中实现点击按钮同时改变文字和文本的功能。通过隐藏和显示盒子中文本域的部分内容,利用按钮单击事件触发。还给出了用JQ实现该功能的简单示例,强调实现此功能需引用jquery插件。

点击按钮同时改变文字和文本

开发工具与关键技术:Visual Studio 2015
作者:徐晶旗
撰写时间:2019年6月17日 

在做项目的时候有遇到项目中有这种功能
在这里插入图片描述
在这里插入图片描述

注意一下表头中右边的文字就会发现,这两张图片表头很相似,只是右边的文字略有差别,其实下面图片的内容就是通过点击上面图片的“看历史记录”得来的。点击“看历史记录”就会跳转到另一个文本区,同时改变文字,而且这里不断点击它能随意再次跳转。那这是怎么做到的呢?其实这些内容是存放在一个盒子中的文本域处,只是把一部分内容隐藏了,然后点击按钮触发它的单击事件它这一部分内容就显示出来了,然后又把另一部分内容隐藏掉,下面就来用JQ来实现这个功能。因为上面图片上的内容需要较多代码才能得以实现,所以下面我就做了一个简单一点的例子,也可以实现上面的功能。

下面是所有的代码,比较简单。

<div class="full mt-2 ml-2">
       <div class=" wish ">
           <a id="dram" href="#"onclick=""style="color:pink;">寻梦路上,不负韶华</a>
       </div>
       <div class="trip">
           <b>
               始终相信,路在脚下,而梦就在前方
               <br />Always believe that road underfoot, and the dream is in the front
           </b>
       </div>
       <div class="memory" style="display:none;">
           <b>
               时光荏苒,岁月轻浅,记忆里那些纯真如同旧照片,泛着黄色的光影渐。            
               <br />Time flies, time is light shallow, memory that is pure like old photos, glowing yellow light gradually.
           </b>
       </div>
   </div>
    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script>
        $("#dram").click(function () {
            if ($("#dram").html() == "寻梦路上,不负韶华") {
                $("#dram").html("花有重开日,人无再少年").css("color","lightblue");
                $(".trip").css("display", "none");
                $(".memory").css("display", "block");
            } else {
                $("#dram").html("寻梦路上,不负韶华").css("color", "pink");
                $(".trip").css("display", "block");
                $(".memory").css("display", "none");

            }
        });
</script>

然后就来看下效果图,这是没点击按钮前的原始图片
在这里插入图片描述

下面是点击a标签中的文字之后,文字和文字颜色都有相应的改变,下面的文本信息也改变了。
这就和我上面图片上的功能相似了,只是换了一些比较简单的内容,原理都是一样的。大家有兴趣也可以去试验一下?
注:按我这种写法要实现上述功能必须要引用一个jquery插件。

在这里插入图片描述

### 如何在 Android Studio 中实现按钮点击后更改文本 为了实现在 Android Studio 中通过按钮点击改变文本的功能,可以按照如下方法操作: 创建一个新的项目,在 `activity_main.xml` 文件中定义一个按钮一个用于显示文本的视图组件。例如 TextView 或者 EditText。 ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 定义Button --> <Button android:id="@+id/buttonChangeText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click Me!" /> <!-- 定义TextView --> <TextView android:id="@+id/textViewToShow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Original Text" /> </LinearLayout> ``` 接着,在对应的 Activity 类文件里设置 OnClickListener 来监听 Button点击事件,并修改 TextView 上的文字内容[^3]。 ```java import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final TextView textView = findViewById(R.id.textViewToShow); // 获取要更新文字的对象 Button button = findViewById(R.id.buttonChangeText); // 获取触发动作的按钮对象 // 设置点击监听器 button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // 当按钮被按下时执行此代码块中的逻辑 textView.setText("Changed!"); // 更改TextView上的文本 } }); } } ``` 上述代码展示了如何响应按钮点击并动态地改变界面上某个控件的内容。这通常涉及到获取 UI 组件实例以及注册相应的事件处理器。 #### 注意事项 - 确认所有的资源 ID 都已经正确定义并且匹配。 - 如果遇到任何编译错误或者运行异常,请检查是否有拼写失误或者其他潜在问题存在。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值