AI助手支持GPT4.0
控件点击变换颜色的逻辑出错点在哪？Where is the logic of the control click to change color?
控件点击变换颜色的逻辑出错点在哪？
请教各位高手，本人拟设计定义数组，根据数组内容渲染生成view控件，点击相应的view控件让它变换底色，同时或触发其他动作。之前是选择控件写死，但现在要随时直接变动数组内容，WXML页面则要同时灵活根据数组变动进行渲染。之前把控件内容和形式以及点击函数写死没有问题，均已实现。切换数组渲染生成控件后，出现了三个问题，1.点击颜色不变化，可能是wxml写的代码有误，但本人不知错在哪里，尝试了其他写法一直没有解决。2.数组渲染下，我想到了FOR循环去迎合其数组变动的不可测性，去判断点击了那个控件，来出发其底色变换，但不成功，如打印outcolor2没有赋颜色值。3. 因要在wxml的页面渲染，需要在JS data中定义变量并在JS中赋值后方可渲染，对吧？但数组未来是可能需要扩大的，且不可测，定义变量却要写死？比如数组长度未来可能20，总不能提前把变量定义的无限大吧？这个问题是，针对需要后期渲染的变量因数组的长度而变动，如何在前期定义呢？ 有点环环相扣的意思，但我觉得应该可以实现。请高手指点，感谢！部分代码如下：
wxml: （我感觉是style="background-color:outcolor{{index+1}}"写的不对，错在哪里？）
<view class="layer2box" wx:if="{{isShowOut}}" bindtap="onClickL2Out" >
<view class="layer2style" style="background-color:outcolor{{index+1}}" wx:for="{{outarray}}" wx:key="*this">
<view id="out{{index+1}}">{{index+1}}_{{item}} view>
<icon id="outicon{{index+1}}" type="success" size="20rpx" color="{{iconcolor}}"> icon>
view>
view>
JS:
const bacgrocolor = "#AFEEEE"
DATA中定义 ：outarray: ["外形", "尺寸", "重量", "标签", "唛头", "其他"],
outcolor1: "",
outcolor2: "",
outcolor3: "",
outcolor4: "",
outcolor5: "",
outcolor6: "",
（上面outcolori的值可能数组长度大于7就不够用了，怎么破？为了在WXML中渲染）
点击变换底色的函数：（写点switch的佐证一下之前的描述，是成功的），目前 console.log("i",i) 不执行，不知为何？
onClickL2Out(res) {
console.log("layer2", res)
for(var i=1; i<this.data.outarray.length; i++){
if(res.target.id=="out"+"i"){
console.log("i",i)
outcolor+i
}
}
点击2_尺寸view 控件，console打印台，说明已执行，但没有打印出outcolor2的值，应该是颜色值？
Please consult the experts, I plan to design and define the array, according to the content of the array to render the view control, click the corresponding view control to change the background color, or trigger other actions at the same time. In the past, the selection control was written dead, but now the array content should be changed directly at any time, and the wxml page should be rendered flexibly according to the array changes. Before the control content and form and click function write dead no problem, have been implemented. There are three problems after switching the array rendering generation control. 1. Click the color does not change. Maybe the code written by wxml is wrong, but I don't know where the error is. I try other writing methods and have not solved it. 2. Under array rendering, I thought of a for loop to cater to the unpredictability of its array changes, to judge which control was clicked to start its background color transformation, but it was not successful. For example, printing outcolor2 did not assign color value. 3. To render the wxml page, you need to define variables in JS data and assign values in JS before rendering, right? But the array may need to be expanded and unpredictable in the future, but the definition variable must be written to death? For example, the length of the array may be 20 in the future. Can't we define the variable infinitely in advance? The problem is, how to define the variables that need to be rendered in the early stage because of the length of the array? It's a little intertwined, but I think it should be possible. Please give me some advice, thank you! Part of the code is as follows: wxml: (I feel it's style = background- color:outcolor What's wrong with it {{index+1}}_ {{item}} View > < icon id = outicon {{index + 1}} "type = success" size = "20rpx" color = {{iconcolor}} > icon > View > JS: const bacprocolor = "# afeee" data: outarray: ["shape", "size", "weight", "label", "shipping mark", "other"], outcolor1: ", outcolor2:", outcolor3: ", outcolor4:", outcolor5: ", outcolor6:", (the value of outcolori above may not be enough if the array length is greater than 7. How to break it? In order to render in wxml) click on the function to transform the background color: (write the switch to support the previous description, which is successful) console.log ("I", I) no enforcement, I don't know why? onClickL2Out(res) { console.log ("layer2", res) for(var i=1; i< this.data.outarray .length; i++){ if( res.target.id== "out"+"i"){ console.log ("I", I) outColor + I}} click 2_ Size view control, console printing table, description has been executed, but the value of outcolor2 is not printed out. Should it be the color value?
onClickL2Out(res) {
console.log("layer2", res)
for (var i = 1; i <= this.data.outarray.length; i++) {
if (res.target.id == "out" + i) {
console.log("i", i)
console.log("outcolor" + i)
this.setData({
outcolori: bacgrocolor
})
} else {
this.setData({
outcolori: ""
})
}
console.log("outcolori",this.data.outcolor2)