Question

我可以通过JavaScript或JQuery切换内容吗？我有内容A和内容B，位置A在嫉妒旁边，B在右边，当我单击复选框时，内容B会变为左侧，内容A会变为右侧，当我再次单击时，它将将会再次变回开始。

这是我的摘录，我尝试在A和B之间交换所有div内容。当我单击复选框时，div A中的所有内容都将与div B交换。但是为什么只有输入形式会改变？虽然内容没有改变，但是有人可以帮助我吗？我的代码有问题吗？

function swap_content(conta,contb)
  {
    var tmp = document.getElementById(conta).value;
    document.getElementById(conta).value = document.getElementById(contb).value;
    document.getElementById(contb).value = tmp;
    var tdp = document.getElementById(text_id1).value;
    document.getElementById(text_id1).value = document.getElementById(text_id2).value;
    document.getElementById(text_id2).value = tdp;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">


<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-5" id="conta" style="background: red;">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>
                            <input type="text" name="text_id1" id="text_id1" value="content A" >
                        </h5>
                    </div>
                    <div class="ibox-body">
                     <span style="color:white">
                     This is desc about Content A </span><br>

                     <img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
                 </div>
             </div>
         </div>

         <div class="col-lg-2">
            <div class="ibox ">
                <div class="ibox-title">

                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
                            <label class="onoffswitch-label" for="example1">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-5" id="contb" style="background: blue">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <input type="text" name="text_id2" id="text_id2" value="content B" >
                    </h5>
                </div>
                <div class="ibox-body">
                    <span style="color:white">This is desc about Content B</span> <br>

                    <img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">

                </div>
            </div>
        </div>

    </div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>

Answer 1

仅输入值会更改，因为这是您所有尝试使用的代码（text_id1和text_id2）。

您的想法是正确的，但是您实际上只需要交换div id="conta"和div id="contb"的内容，但是只有表单域元素具有value属性。 div元素具有2属性（用于仅获取/设置元素内的文本）或.textContent属性（用于获取/设置包含需要解析的HTML的文本）。

最后，请勿使用内联HTML事件属性，例如onclick。有.innerHTML个人不使用这种已有25年历史的技术。相反，所有事件绑定都用JavaScript进行-与HTML分开。

// Get reference to the checkbox and set up click event handler
var cb = document.getElementById("example1").addEventListener("click", swap_content);  

// Store references to the two div elements
var conta = document.getElementById("conta");
var contb = document.getElementById("contb"); 

function swap_content() {
  // Non-form field elements don't have .value, they have .innerHTML
  var tmp = conta.innerHTML;
  conta.innerHTML = contb.innerHTML;
  contb.innerHTML = tmp;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">


<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-5" id="conta" style="background: red;">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>
                            <input type="text" name="text_id1" id="text_id1" value="content A" >
                        </h5>
                    </div>
                    <div class="ibox-body">
                     <span style="color:white">
                     This is desc about Content A </span><br>

                     <img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
                 </div>
             </div>
         </div>

         <div class="col-lg-2">
            <div class="ibox ">
                <div class="ibox-title">

                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
                            <label class="onoffswitch-label" for="example1">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-lg-5" id="contb" style="background: blue">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <input type="text" name="text_id2" id="text_id2" value="content B" >
                    </h5>
                </div>
                <div class="ibox-body">
                    <span style="color:white">This is desc about Content B</span> <br>

                    <img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">

                </div>
            </div>
        </div>

    </div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>

Answer 2

您可以尝试以下方法：

GLuint shaderProgram::createShaderProgram(const char *fileName) {
    // Creamos el shader program y almacenamos su identificador
    if (handler) {
        shaderP = new QOpenGLShaderProgram();
        handler = shaderP->create();
        if (!handler) {
            fprintf(stderr, "Cannot create shader program: %s.\n", fileName);
            return 0;
        }
    }
    // Cargamos y compilamos cada uno de los shader objects que componen este
    // shader program
    char fileNameComplete[256];
    strcpy_s(fileNameComplete, fileName);
    strcat_s(fileNameComplete, "-vert.glsl");
    QOpenGLShader* vertex = new QOpenGLShader(QOpenGLShader::Vertex);
    GLuint vertexShaderObject = compileShader(fileNameComplete, QOpenGLShader::Vertex,vertex);
    if (vertexShaderObject == 0) {
        return 0;
    }
    strcpy_s(fileNameComplete, fileName);
    strcat_s(fileNameComplete, "-frag.glsl");
    QOpenGLShader* fragment = new QOpenGLShader(QOpenGLShader::Fragment);
    GLuint fragmentShaderObject = compileShader(fileNameComplete, QOpenGLShader::Fragment, fragment);
    if (fragmentShaderObject == 0) {
        return 0;
    }
    // Asociamos los shader objects compilados sin errores al shader program
    shaderP->addShader(vertex);
    shaderP->addShader(fragment);

    // Enlazamos el shader program y comprobamos si hay errores
    handler = shaderP->link(); //Here is where the error is thrown
    if(!handler)
    {
        QString error = shaderP->log();
        std::cout<< error.toStdString()<<std::endl;
        return 0;
    }
    else {
        linked = true;
    }
    return handler;
}

bool shaderProgram::compileShader(const char *filename, QOpenGLShader::ShaderTypeBit type,QOpenGLShader* shaderComp) {
    // Comprobamos si en la solución existe algún archivo de recursos con el
    // nombre que se pasa como argumento
    if (!fileExists(filename)) {
        fprintf(stderr, "Shader source file %s not found.\n", filename);
        return 0;
    }
    // Si existe se lee en una cadena de caracteres que contiene el listado
    // completo del shader source
    std::ifstream shaderSourceFile;
    shaderSourceFile.open(filename);
    if (!shaderSourceFile) {
        fprintf(stderr, "Cannot open shader source file.\n");
        return 0;
    }
    std::stringstream shaderSourceStream;
    shaderSourceStream << shaderSourceFile.rdbuf();
    std::string shaderSourceString = shaderSourceStream.str();
    shaderSourceFile.close();

    // - Creamos un shader object para ese archivo que se ha leído
    QOpenGLShader shader(type);

    QString code(QString::fromStdString(shaderSourceString));

    bool result = shader.compileSourceCode(code);

    if(!result){
        const QString qs = shader.log();
        std::cout << qs.toStdString();
        this->logString = qs.toStdString();
        return false;
    }
    //si ha compilado bien, creamos el shader
    shaderComp = &shader;
    return true;
}

注意：：您需要传递div的ID（您希望交换的内容）。将onlick函数更改为function swap_content(conta, contb) { var contentA = document.getElementById(conta).innerHTML; document.getElementById(conta).innerHTML = document.getElementById(contb).innerHTML; document.getElementById(contb).innerHTML = contentA; }

使用复选框交换div中所有内容的位置

2 个答案: