我有一组使用JavaScript的div变成了单选按钮。选择按钮时，对于同一个表格中的另一个div（但同级）中的另一个div，我需要它来反映该按钮的单选值，并具有相同div的文本颜色以反映该单选。值，这将是“颜色”。
<form method='post' action='send.php'>
<div class='colorsGrid' id='colors' >
<div style='background-color:red;' class='radio' data-value='Red'>1</div>
<div style='background-color:green;' class='radio' data-value='Green'>2</div>
<div style='background-color:black;' class='radio' data-value='Black'>3</div>
<input type='text' id='radio-value' name='radio-value' />
</div>
<div class='' id='color radio-value' name='radio-value' />Color Here</div>
</form>
这是html。我将把其余的代码放在JSfiddle中。 想法是，当我单击其中一个单选格div时，“颜色在这里” div表示单选值并使其变为该颜色，因为单选值是一种颜色... 这是min.js： https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
基本上，id为“ color”且标记为“ Color Here”的div，我想成为所选按钮的颜色，并将其文本更改为单选值。 这是JsFiddle： https://jsfiddle.net/Lrp16v2x/31/
谢谢大家
答案 0 :(得分：1)
这可以做到。我还清理了您已经拥有的一些逻辑。
# Programs generate exit point along the wall, then spawn bot in random location.
#He will move around and look for the exit, using different tools.
#7.0 - Program randomly moves from starting point and makes 9 different steps.
#It is forbidden for it to step in same place more than one.
#7.1 - Program not only moves, but also interact with the walls.
#It will not move on any wall or other forbidden point that can be added to the list.
#7.2 - Added circle around the bot that travels with him
from asciimatics.screen import Screen
import os
import random
import math
import time
os.system('mode con: cols=51')
def exit_point():
''' Randomly select the wall, where exit point will be.
Then select one random point along the line(wall) and create there exit point'''
global exitX
global exitY
wall = random.randint(1,4)
if wall == 1:
exitX = random.randint(1,49)
exitY = 0
elif wall == 2:
exitX = 49
exitY = random.randint(1,49)
elif wall == 3:
exitX = random.randint(1,49)
exitY = 49
elif wall == 4:
exitX = 0
exitY = random.randint(1,49)
def start_point():
''' Select coordinates for starting point inside the wall zone,
which is smaller by one then wall size, so it will not spawn it on the wall.'''
global startX
global startY
startX = random.randint(2,48)
startY = random.randint(2,48)
def setup(screen):
''' Creates wall image from #. Red # represents Exit.
Then create starting point and spawn our hero @.'''
screen.fill_polygon([[(0, 0), (50, 0), (50, 50), (0, 50)],[(1, 1), (49, 1), (49, 49), (1, 49)]])
exit_point()
screen.print_at("#", exitX, exitY, 1, 1)
start_point()
screen.print_at("@", startX, startY, 2, 1)
screen.refresh()
input()
def move(screen):
''' - First program will re-create walls, exit point and spawn our hero @.
- Then the wall is defined as array of points. Points are added to big,
global list of forbidden points, where no move can be made
- To the same list, starting point is added
- '''
#bring back setup screen, waste of code but more intuiative
screen.fill_polygon([[(0, 0), (50, 0), (50, 50), (0, 50)],[(1, 1), (49, 1), (49, 49), (1, 49)]])
screen.print_at("#", exitX, exitY, 1, 1)
screen.print_at("@", startX, startY, 2, 1)
#list of points where new point can not be created
forbidden_place = []
wall = []
for i in range(49):
point = [i,0]
wall.append(point) #wall no. 1
point = [49,i]
wall.append(point) #wall no. 2
point = [i,49]
wall.append(point) #wall no. 3
point = [0,i]
wall.append(point) #wall no. 4
forbidden_place = wall
#Add starting point to the forbidden points list
point = [startX,startY]
forbidden_place.append(point)
#moves and looking around animation
moves = 1
while moves < 500:
#radius around our here where it will see things. Right now it's nothing else like visualisatios.
radius = 10
for i in range(radius):
XL = -(round(math.sqrt(radius*radius-i*i))) #XL - X left, for X points on left side of the circle.
XR = (round(math.sqrt(radius*radius-i*i))) #XR - X right, for X points on right side of the circle.
Y = i #iterated after Y coordinate and calculate X for left and right
YU = (round(math.sqrt(radius*radius-i*i))) #YU - Y up, for Y points on the topside of the circle.
YD = -(round(math.sqrt(radius*radius-i*i))) #YD - Y down, for Y points on the downside of the circle.
X = i #iterated after X coordinate and calculate Y for top and bottom
if moves > 1:
#if is here, otherwise it will use exit point and delete points in circle around it
#this part inide the if will clear last points of the radius light,
#by using point where hero was one move before
screen.print_at(" ", XR + forbidden_place[-2][0], Y + forbidden_place[-2][1], 4, 1)
screen.print_at(" ", XL + forbidden_place[-2][0], Y + forbidden_place[-2][1], 4, 1)
#fill all holes after first two lines of the code, by making same circle, but rotated by 90deg
screen.print_at(" ", X + forbidden_place[-2][0], YU + forbidden_place[-2][1], 4, 1)
screen.print_at(" ", X + forbidden_place[-2][0], YD + forbidden_place[-2][1], 4, 1)
screen.print_at(" ", XR + forbidden_place[-2][0], -Y + forbidden_place[-2][1], 4, 1)
screen.print_at(" ", XL + forbidden_place[-2][0], -Y + forbidden_place[-2][1], 4, 1)
#fill all holes after first two lines of the code, by making same circle, but rotated by 90deg
screen.print_at(" ", -X + forbidden_place[-2][0], YU + forbidden_place[-2][1], 4, 1)
screen.print_at(" ", -X + forbidden_place[-2][0], YD + forbidden_place[-2][1], 4, 1)
screen.print_at("+", XR + forbidden_place[-1][0], Y + forbidden_place[-1][1], 4, 1)
screen.print_at("+", XL + forbidden_place[-1][0], Y + forbidden_place[-1][1], 4, 1)
screen.print_at("+", X + forbidden_place[-1][0], YU + forbidden_place[-1][1], 4, 1)
screen.print_at("+", X + forbidden_place[-1][0], YD + forbidden_place[-1][1], 4, 1)
screen.print_at("+", XR + forbidden_place[-1][0], -Y + forbidden_place[-1][1], 4, 1)
screen.print_at("+", XL + forbidden_place[-1][0], -Y + forbidden_place[-1][1], 4, 1)
screen.print_at("+", -X + forbidden_place[-1][0], YU + forbidden_place[-1][1], 4, 1)
screen.print_at("+", -X + forbidden_place[-1][0], YD + forbidden_place[-1][1], 4, 1)
#refresh wall visualisation, otherwise it would be 'eaten' by light.
#This part will be deleted after I learn how to use effects/scenes
screen.fill_polygon([[(0, 0), (50, 0), (50, 50), (0, 50)],[(1, 1), (49, 1), (49, 49), (1, 49)]])
screen.print_at("#", exitX, exitY, 1, 1)
#this part will generate movement points for our here.
#It will do it's best to not step in same place twice. So here will most likely stuck at some point.
#In future, there will be more logic that will allow him to move over his steps, if no other way is possible.
moveX = forbidden_place[-1][0] + random.randint(-1,1)
if moveX == forbidden_place[-1][0]:
moveY = forbidden_place[-1][1] + random.randrange(-1,2,2) #select between -1 and 1, but not 0
else:
moveY = forbidden_place[-1][1] + random.randint(-1,1) #select between -1 and 1, including 0
point = [moveX,moveY]
if point not in forbidden_place:
forbidden_place.append(point)
screen.print_at(".", forbidden_place[-2][0], forbidden_place[-2][1], 2, 1) #footprint of the hero
screen.print_at("@", moveX, moveY , 3, 1) #hero's current position
moves = moves + 1
else:
moveX = forbidden_place[-1][0] #if point is already on the list, to prevent it overwrite variable moveX and moveY
moveY = forbidden_place[-1][1] #the program will clear it, by assigning it to last legit value from trace list,
time.sleep(0.1)
screen.refresh()
input()
Screen.wrapper(setup)
Screen.wrapper(move)
input()
使用jQuery，没有必要去到元素的父元素并在其中搜索同级元素。只需直接引用同级。
答案 1 :(得分：0)
如果我理解得很好，您想用颜色替换“此处的颜色”，如果需要，只需在函数末尾添加一行，即可：
$ docker run --name=nexus2 -p 8082:8081 --volumes-from nexus sonatype/nexus3}）；
答案 2 :(得分：0)
我相信您希望“此处的颜色” div的文本显示被单击的.radio div的值。同样，采用单击的.radio按钮的背景色，然后将该颜色设置为“ Color Here” div的文本颜色。我能够通过以下方式做到这一点：
我可以确定有更好的解决方案，但是我在休息时间还剩5分钟，可以帮助您解决这个问题。让我知道您是否需要更多帮助。
$(' .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
var color = $(this).css("background-color");//Get the color of the clicked element
//alert(val);
$(this).parent().find('input').val(val);
$(this).parent().siblings('.CHANGE').text(val).css("color", color);//find the parent sibling .CHANGE and set the text and CSS property of the element within the same onclick function
}); .colorsGrid {
display: grid;
grid-template-columns: 300px;
grid-template-rows: auto;
}
.radio {
border: 2px solid orange;
cursor:pointer;
}
.radio.selected{
border-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method='post' action='send.php'>
<div class="colorsGrid" id='colors' >
<div style='background-color:red;' class='radio' data-value="Red">1</div>
<div style='background-color:green;' class='radio' data-value="Green">2</div>
<div style='background-color:black;' class='radio' data-value="Black">3</div>
<input type='text' id='radio-value' name='radio-value' />
</div>
<div class='CHANGE' id='color radio-value' name='radio-value'></div>
</form>