Change text content individually by clicking on multiple separate text in jquery + loop

Nice to meet you. I'm a beginner at jquery.
I wanted to implement a feature like the one below, so I looked it up on the web, but I'm having a hard time getting to the answer. I'd appreciate it if someone could tell me.

What I want to do is as shown in the URL below, but there is one problem.

参考 Reference site (sample screen)
http://www.iltt.info/page/information/contents/20091105_sample.htm

参考 Reference site (explanation page)
http://www.iltt.info/page/information/contents/20091105.htm

The problem is, for example, if you put buttons side by side with A, B, C, and D on the student list screen, everyone's text will be changed at the same time if you keep the above URL.

I'd like to separate them so that they work separately, but I couldn't find out no matter how much I looked into them.

Since the same class is specified, I understand the logic that all of them will be replaced together, but I still don't know what to do separately.

You might say, "Why don't you write js for the number of students separately from different classes and ids?" But I think there are other good ways because the number of people writing will increase.

I would appreciate it if someone could tell me.

Thank you for your cooperation.

Additional note=======
I would like to add one more thing.
The text you want to change is separate data such as your address and phone number.

[Example]

Mr. Taro Tanaka Click → [Shibuya Ward, Tokyo]→ [03-1111-1111] → Loop

Jiro Yoshioka
Click → [Yokohama City, Kanagawa Prefecture] → [043-111-1111] → Loop

This image looks like this

Current State Code ===================

Please refer to the above reference URL.

 Taro Yamada    
<div style="border:solid1px#ccc">
    <div class="cm1">
        <p class="change">[Contract address] Shibuya </p>, Shibuya Ward, Tokyo, 150-0002
    </div>
    <div class="cm2">
        <p class="change">[Phone number] 03-xxxx-1111</p>
    </div>
</div>

Jiro Yoshioka Corporation
<div style="border:solid1px#ccc">
    <div class="cm1">
        <p class="change">[Contract address] 150150-0052 Motoyogi-cho, Shibuya-ku, Tokyo </p>
    </div>
    <div class="cm2">
        <p class="change">[Phone number] 03-xxxx-2222</p>
    </div>
</div>

Below is the script.

<script type="text/javascript">
    $(function(){
        $(".change").click(function(){
            for(i=1;i<3;i++){
                if(i==2){
                    j = 1;
                } else{
                    j = i+1;
                }
                if($(".cm"+i).css("display")!="none"){
                    $(".cm"+i).hide();
                    $(".cm"+j).show();
                    break;
                }
            }
        });
    });
</script>

jquery

2022-09-30 19:24

2 Answers

Like this?

$(function(){
        $(".change").click(function(e){
        	// Hide current element
        	$(e.target).parent().hide();
        	// Move current element to end
        	$(e.target).parent().parent().append($(e.target).parent());
        	// Show leading elements
        	$(e.target).parent().parent().children("div:eq(0)").show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Japanese woodpecker 
<div style="border:solid1px#ccc">
    <div>
        <p class="change">[Contract address] Shibuya </p>, Shibuya Ward, Tokyo, 150-0002
    </div>
    <div style="display:none">
        <p class="change">[Phone number] 03-xxxx-1111</p>
    </div>
</div>

Jiro Yoshioka Corporation
<div style="border:solid1px#ccc">
    <div>
        <p class="change">[Contract address] 150150-0052 Motoyogi-cho, Shibuya-ku, Tokyo </p>
    </div>
    <div style="display:none">
        <p class="change">[Phone number] 03-xxxx-2222</p>
    </div>
</div>

2022-09-30 19:24

For example, the following.
List data

vardb=[
    { name: "Taro Tanaka", message: ["Shibuya Ward, Tokyo", "03-1111-1111" },
    { name: "Jiro Yoshioka", message: ["Yokohama City, Kanagawa Prefecture", "043-1111-1111"]},
    { name: Yoko Yokoo, message: ["Shizuoka City, Shizuoka Prefecture", "xxx-xxx-1111"]}
];

Create a view from this data, holding it in the form shown in .
Assign the message portion with a closure (keep the message array and index: each must have its own) functions to run when clicked.

<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
vardb = [
	{ name: "Taro Tanaka", message: ["Shibuya Ward, Tokyo", "03-1111-1111" },
	{ name: "Jiro Yoshioka", message: ["Yokohama City, Kanagawa Prefecture", "043-1111-1111"]},
	{ name: Yoko Yokoo, message: ["Shizuoka City, Shizuoka Prefecture", "xxx-xxx-1111"]}
];
</script>
<style>
table#Roster { border-collapse:collapse;}
# Roster td { border:1px black solid;}
</style>
</head>
<body>
<table id="Roster"></table>
<script>
function func(messages){
	vari = 0;
	return function() {
		i =(i+1)% messages.length;
		$(this).text(messages[i]);
	};
}
$.each(db, function(index,value){
	var record=$("<tr></tr>")
		.append("<td>"+value.name+"</td>")
		.append($("<td>"+value.message[0]+"</td>").click(func(value.message)));
	$("#Roster").append(record);
});
</script>
</body>
</html>

2022-09-30 19:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656